<!-- table的数据来源是tableData -->
<!-- 勾选的行发生变化时触发handleSelectionChange方法(切页也会触发) -->
<el-table ref="table" :data="tableData" @selection-change="handleSelectionChange">
……
</el-table>
// 勾选行发生变化/切页时触发的监听方法
handleSelectionChange(selection) {
// 在data中定义allSelectedRows和allSelectedRowsIds两个列表
// allSelectedRows 保存勾选过的每一行的信息
// allSelectedRowsIds 保存勾选过的每一行的id(用以切页后匹配id,重新勾选)
this.allSelectedRows = [ ...this.allSelectedRows, ...selection ];
// 去重
this.allSelectedRows = Array.from(new Set(this.allSelectedRows.map(item => item.id))).map(id => this.allSelectedRows.find(item => item.id === id)); // 根据每个项里的id去重
this.allSelectedRowsIds = this.allSelectedRows.map((item)=>{return item.id});
}
// getList是查询tableData的方法
getList() {
接口(请求参数).then((res) => {
this.tableData = res.data;
}
).then(() => {
// 重新勾选之前勾选过的行的方法
this.selectFormer();
}
)
}
// 重新勾选之前勾选过的行的方法
selectFormer() {
// 获取el-table
let table = this.$refs.table
// 遍历el-table每一行
table.store.states.data.forEach((row, index) => {
// 如果之前保存的勾选行的id与当前遍历到的行的id匹配
if (this.allSelectedRowsIds.indexOf(row.id) != -1) {
// 那么把当前遍历到的行勾选上
table.toggleRowSelection(this.tableData[index], true)
}
})
},