el |
您所在的位置：网站首页 › eltree多选限制选择个数 › el |
el
|
el-tree和el-table多选实现人员多选，并做回显，在回显区删除人员，表格同时取消选中状态
1、左树又表，左边树节点切换，table显示节点下对应的人员，并做分页显示 2、下方回显区显示已经勾选的人员，不受树节点切换和页码切换影响 3、回显区人员删除，对应树节点下的表格中人员选中状态改为非选中 效果如下图
1、把回显区删除的数据进行存储 2、然后tableData更新以后就查找是否包含回显区删除的数据，包含的话就取消对应数据的选中效果 话不多说，上代码 ....... {{tag.User.truename}} // An highlighted block data() { return { subcontractorMultiple: [], // el-table数据勾选数据存储 relBox: [], // 回显区的数据 removeDatas:[], // 存储回显区删除时的数据 } } methods:{ // el-table 多个勾选时 subcontractorSelection(val) { // 选择数据暂存 this.subcontractorMultiple = JSON.parse(JSON.stringify(val)); this.relBox = JSON.parse(JSON.stringify(val)); }, // 回显区数据删除 handleClose(tag) { // 删除标签渲染的数组 this.relBox.splice( this.relBox.findIndex(item => item.User.id == tag.User.id), 1 ); // 删除列表选中数组存储的数组 this.subcontractorMultiple.splice( this.relBox.findIndex(item => item.User.id == tag.User.id), 1 ); // 将标签删除的对应列表行数据存储 this.removeDatas.push(tag); this.changeRowStatus(); }, // 取消Table选中项 changeRowStatus() { this.removeDatas.length && this.removeDatas.forEach(data => { let _index = this.tableData.findIndex(i => i.User.id == data.User.id); if (_index > -1) { this.$refs.subcontractorTable.toggleRowSelection( this.tableData[_index], false ); } }); }, // 获取table数据 getTableData(id) { ........ // 在成功的回调里赋值并调一下取消Table选中项的方法：this.changeRowStatus() this.tableData = response.data ? response.data.data : []; this.total = response.data ? response.data.total : 0; this.$nextTick(() => { // 这个一定要加，因为要在dom元素渲染完整以后 this.removeDatas.length && this.changeRowStatus(); }); }, } |
【本文地址】
今日新闻 |
推荐新闻 |