需求:table表单多选后,翻页之后返回,前一页选中数据保持选中状态,且选中数据包含多页勾选的数据。
![](https://i-blog.csdnimg.cn/blog_migrate/91edc82efa7055290b88d1704cb4ca01.png)
实现方法:
html部分
<el-table size="small"
:data="listData"
ref="multipleTable"
row-key="getRowKeys"
@select="handleCheckBox"
@select-all="handleSelectAll"
>
</el-table>
export default {
data() {
return {
listData: [],
multipleSelection: [],
}
}
}
methods中方法
// 每行唯一 行标识key
getRowKeys(row){
return row.userGuid;
},
// 单选时的方法
handleCheckBox(rows, row) {
if (this.multipleSelection.find((item) => item.userGuid == row.userGuid)) {
//过滤(删除)
this.multipleSelection = this.multipleSelection.filter(
(item) => item.userGuid != row.userGuid
);
} else {
this.multipleSelection.push(row);
}
},
// 当页全选的方法
handleSelectAll(rows) {
if (rows.length) {
rows.forEach((row) => {
if (!this.multipleSelection.find((item) => item.userGuid == row.userGuid)) {
this.multipleSelection.push(row);
}
});
} else {
this.listData.forEach((row) => {
this.multipleSelection = this.multipleSelection.filter(
(item) => item.userGuid != row.userGuid
);
});
}
},
回显部分
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
const { data, code, total } = await this.Service.getdataList({
...this.searchForm,
})
if (data && code == 1) {
loading.close();
this.listData = data.list;
this.total = data.total;
this.$nextTick(()=>{
this.listData.forEach((item,index)=>{
if(this.multipleSelection.findIndex(v=>v.userGuid == item.userGuid) >= 0){
this.$refs.multipleTable.toggleRowSelection(
this.$refs.multipleTable.data[index],
true
);
}
})
})
}