需求:将用户上次的选中结果进行复现,点击多选框时结果栏进行添加或减少,删除结果栏数据时列表的选中状态要随着改变。(这里标签为结果显示栏)
isSelected() {
this.$refs.multipleTable.clearSelection();//element自带方法,用于清空所有行的选中状态
this.$nextTick(() => {
//需要复现的选中结果与当前的列表数据进行对比,如果相等则调整改表格行的选中状态
this.multipleSelection.forEach((item, index) => {
// console.log(item);
this.tableData.forEach((el, dataIndex) => {
// console.log(el);
if (item.id == el.id) {
this.toggleSelection([this.tableData[dataIndex]]);
}
});
});
});
},
上面的方法用于调整表格的选中状态,当表格数据有变化或者需要复现的数据有变化时都需要调用该方法
isExist() {
let arr = [];
//获取当前表格数据与已选数据中重复的数据,方便后期判断多选结果的变化
this.multipleSelection.forEach((e) => {
let flag = 0;
this.tableData.forEach((el, dataIndex) => {
if (e.id == el.id) {
flag = 1;
}
});
if (flag == 1) {
arr.push(e);
}
});
//将当前选中的结果与已有的结果进行对比,如果没有则往结果集中添加
this.currentSelection.forEach((item, index) => {
let flag = 0;
this.multipleSelection.forEach((el, dataIndex) => {
// console.log(el);
if (item.id == el.id) {
flag = 1;
}
});
if (flag != 1) {
// 将结果中不存在的数据存入,已存在的忽略
this.multipleSelection.push(item);
this.$emit("sendResourcesData", {
result: this.multipleSelection,
id: this.currentPointer,
});
}
});
//判断表格中取消选中ed数据
arr.forEach((c) => {
let sign = 0;
this.currentSelection.forEach((f) => {
if (f.id == c.id) {
// 之前选中的依旧存在
sign = 1;
}
});
if (sign == 0) {
this.multipleSelection = this.multipleSelection.filter((d) => {
return c.id != d.id;
});
console.log(this.multipleSelection);
//这里提交给父组件交给父组件处理
this.$emit("XXXXX", {
result: this.multipleSelection,
id: this.currentPointer,
});
}
});
},