vue+element表格随笔

前端小小白~

于 2022-04-13 14:26:24 发布

阅读量384

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/DevelopmentW/article/details/124147229

该段代码展示了如何在Vue应用中实现表格的多选功能，并将选中的表格行数据展示为标签。当标签被关闭时，对应的表格行取消选中。通过`handleSelectionChange`方法更新选中值，`handleClose`方法处理标签关闭并同步表格选中状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、实现功能：表格选中，顶部tag展示；tag关闭，表格取消选中
在这里插入图片描述

<template>
  <div>
    <el-card shadow="never" :style="{height: '150px'}" class="mb-10">
      <p class="mb-10">选中的值</p>
      <el-tag class="ml-10 mb-10" v-for="tag in multipleSelection" :key="tag.name" closable :type="tag.type" @close="handleClose(tag)">
        {
   {
   tag.workName}}
      </el-tag>
    </el-card>
    <!--表格-->
    <el-card shadow="never" :style="{height: '850px'}">
      <el-table :data="tableData.dataList" border stripe  :header-cell-style="{background:'#E7F0FA',color: '#333'}"
                  :row-style

最低0.47元/天解锁文章