vue+element表格随笔

最新推荐文章于 2024-11-13 16:17:55 发布

原创

最新推荐文章于 2024-11-13 16:17:55 发布 · 413 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

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

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="{height