el-table中想要两个表格的多选相互响应就要用到这些方法
<!-- 删除展示表格中的某一个 -->
<el-button @click="open">打开选项表格</el-button>
<el-button @click="delete">批量删除</el-button>
<!-- 展示表格 -->
<el-table :data="listData" ref="listTable" :row-key="getRowKey" @selection-change="getChange($event, 'list')">...</el-table>
<!-- 选项表格 -->
<el-dialog :visible.sync="dialogVisible">
<el-table :data="selectData" ref="selectTable" :row-key="getRowKey" @selection-change="getChange($event,'select'">...</el-table>
</el-dialog>
实际使用中，toggleRowSelection会自动触发所有selection-change，导致展示表格中不仅没删掉数据，反而还增加了重复的数据
解决办法 给需要回显的selection-change加上条件判断简称：上锁
methods:{
// 打开弹窗
open(){
this.dialogVisible = true
// 获取选项表格中的数据
this.getList()
},
// 表格多选
getChange(row, key){
if(key === 'select'){
// 是否上锁
if(this.flag) return
this.listData = row
}else{
// 中间参数 从展示表格中选择要删除的数据
this.deleteData = row
}
},
// 批量删除
delete(){
// 上锁
this.flag = true
// 回显操作
this.deleteData.forEach(i => {
// 因为我们阻止了自动触发selection-change 所以要从展示表格中删掉
this.listData.splice(i, 1)
// 在选择表格中同步去掉勾选 toggleRowSelection也是导致自动触发多选的原因
this.$refs.selectTable.toggleRowSelection(i)
})
// 结束后要解锁
this.flag = false
},
getRowKey(row) {
// 唯一标识 作为对应回显参数的依据
return row.id
}
}
若有更好的方法也请告诉我
