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

最新推荐文章于 2024-05-14 14:48:59 发布

原创最新推荐文章于 2024-05-14 14:48:59 发布 · 811 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端同时被 2 个专栏收录

8 篇文章

订阅专栏

VUE

7 篇文章

订阅专栏

文章展示了如何在Vue.js应用中，使用template和v-for指令动态渲染el-tag组件，并通过el-table的selection-change事件处理选中数据。当关闭tag时，通过toggleRowSelection方法同步更新表格的选中状态，实现数据双向绑定和交互。

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);
    },