element-ui表格多选回填及联动实现

问题描述：

表格分页后，数据多选并支持数据回显；

问题分析：

在表格初始化时，需要把之前选择的数据勾选上，当操作当前表格时，需要把数据联动到已选择数据中；

解决方案：

1、对源数据深拷贝；

let copyData = JSON.parse(JSON.stringify(resource));

2、每次表格刷新数据后，需要重新回显数据

setTimeout(() => {
 tableData.map(item => {
     let hasPicked = copyData.findIndex(it => it.rowId === item.rowId) > -1;
     if (hasPicked) {
         tableVNode.toggleRowSelection(item, true);
     }
 });
});

3、当表格行发生手动选择时，需要对copy数据进行修改；

// 如果selection中没有当前行数据，默认从选择中移除，否则添加
let isPick = selection.findIndex(oo => oo.rowId === row.rowId) > -1;
if (isPick) {
 copyData.push(row);
} else {
 let idx = copyData.findIndex(oo => oo.rowId === row.rowId);
 copyData.splice(idx, 1);
}

4、如果手动触发全选按钮事件，需要对当前拷贝数据进行处理；

// 如果selection的长度为0，是取消全选，需要把所有已经选择的当前也数据从选择数据中剔除
// 否则需要把非被页面数据添加到数据中
if (selection.length === 0) {
 tableData.map(it => {
     let idx = copyData.findIndex(oo => oo.rowId === it.rowId);
     if (idx > -1) copyData.splice(idx, 1);
 })
} else {
 tableData.map(it => {
     let obj = copyData.find(oo => oo.rowId === it.rowId);
     if (!obj) copyData.push(it);
 })
}

5、如果页面确认选择结果，需要对拷贝数据进行拷贝回填；

resource = JSON.parse(JSON.stringify(copyData));