表格分页后选中数据丢失
table表格有很多页，每个页勾选了之后，切换分页，之前的页里所勾选的内容会被清空，现在想要解决此问题，切换分页不清空之前的勾选内容，代码如下：
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@select="select"
@select-all="selectAll"
v-el-table-infinite-scroll="load"
>
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 20,
},
// 总条数
total: 0,
//选中数据的id集合
selectID: [],
//选中数据的集合
selectedItems: [],
//表格数据
tableData: [],
}
},
//监听选中数据变化
watch: {
selectedItems(val) {
this.selectID = [];
if (val.length > 0) {
val.forEach((value, index) => {
this.selectID.push(value.id);
});
}
},
},
methods: {
//选中table已有数据
selectedPreExisting(rows) {
if (rows.length > 0) {
//这里使用this.$nextTick是防止表格未渲染完成就执行，导致无法添加选中效果
this.$nextTick(() => {
rows.forEach((row) => {
//判断row是存在当前tableData
let selectedItem = this.tableData.find(
(item) => item.id == row.id
);
this.$refs.multipleTable.toggleRowSelection(selectedItem);
});
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
//表格单选
select(selection, row) {
console.log(111);
//因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断
//这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减
if (
selection &&
selection.find((item) => item && item.id == row.id)
) {
this.addRows([row]);
} else {
this.deleteRows([row]);
}
},
//表格全选
selectAll(selection) {
//判断是选中还是取消
if (selection.length > 0) {
this.addRows(this.tableData);
} else {
this.deleteRows(this.tableData);
}
},
//添加选中
addRows(rows) {
rows.forEach((row) => {
//过滤，当selectedItems有此条数据时，则直接返回，不执行添加
if (this.selectedItems.find((item) => item.id == row.id)) {
return;
}
this.selectedItems.push(row);
});
},
//取消选中
deleteRows(rows) {
//当selectedItems为空数组时，不执行删除
if (this.selectedItems.length == 0) {
return;
}
//过滤掉当前取消选中的数组
rows.forEach((row) => {
this.selectedItems = this.selectedItems.filter(
(item) => item.id !== row.id
);
});
},
//下拉分页
load() {
if (this.tableData.length < this.total) {
this.queryParams.pageNum++;
this.getList();
}
},
//获取数据
getList() {
list(this.queryParams).then((res) => {
this.tableData = this.tableData.concat(res.rows);
//重新请求数据时触发,将已经选中的数据传给selectedPreExisting方法
this.selectedPreExisting(this.selectedItems);
this.total = response.total;
});
},
}
</script>
