element:el-tag与表格联动勾选取消

最新推荐文章于 2024-03-27 11:25:00 发布

lareinax5

最新推荐文章于 2024-03-27 11:25:00 发布

阅读量650

点赞数

分类专栏：前端 VUE 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lareinax5/article/details/129297834

版权

前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

VUE

7 篇文章 0 订阅

订阅专栏

1、template 中相应代码

<div>
<template v-for="item in formUsers">
  <el-tag  
	  :key="item.value"  
	  :index="item.value"
   	  closable  
   	  @close="handleCloseTag(item)"  >
   </el-tag>
</template>
</div>

 <el-table
        :data="userData"
        ref="multipTable"
        style="width: 900px; margin: 20px auto"
        height="380px"
        @selection-change="handleSelectionChange"
      >
 </el-table>

2、表格的@selection-change事件数组是选中数据

 handleSelectionChange(val) {
      this.formUsers = val;  //formUsers在data中相应数据绑定
    },

3、关闭tag同步取消表格
toggleRowSelection 重点是这个属性，toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中

getIndexById(id) {
      let index;
      for (let i = 0; i < this.userData.length; i++) {
        if (id === this.userData[i].id) {
          index = i;
          break;
        }
      }
      return index;
    },
    
    handleCloseTag(data) {
      this.formUsers.splice(this.formUsers.indexOf(data), 1);
      let index = this.getIndexById(data.id);
      this.$refs.multipTable.toggleRowSelection(this.userData[index], false);
    },