描述
当使用el-table勾选效果的时候，会出现第一页勾选后翻页到下一页，再跳转回第一页，这时第一页的勾选状态全没了。这是因为执行了接口查询后重新替换数据，触发了vue的双向绑定，对dom进行了重新的创建，所以原来的勾选状态丢失。
解决思路
使用object对勾选数据使用键值对的形式进行保存，键（key）是页数，值（value）就是勾选的数据
演示
提示：主要使用 handleSelectionChange() 和 check() 方法，复制这2个方法到自己项目使用。check函数里的 if 判断也要改成自己需要判断的字段
<template>
<div id="app">
<el-table ref="multipleTable"
:data="tableData1"
@select-all="handleSelectionChange"
@select="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
<el-pagination :current-page.sync="page" :page-size="3" @current-change="pageChange" :total="9"></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
tableData1: [],
tableData: [{
name: '王小虎1',
id: '1'
}, {
name: '王小虎2',
id: '2'
}, {
name: '王小虎3',
id: '3'
}, {
name: '王小虎4',
id: '4'
}, {
name: '王小虎5',
id: '5'
}, {
name: '王小虎6',
id: '6'
}, {
name: '王小虎7',
id: '7'
}, {
name: '王小虎8',
id: '8'
}, {
name: '王小虎9',
id: '9'
},],
multipleSelection: {}
}
},
mounted() {
this.pageChange()
},
methods: {
/**
* 手动勾选数据行的 Checkbox 时触发
**/
handleSelectionChange(val) {
const arr = new Set()
let item = {}
for (item of val) {
arr.add(item.id)
}
// 使用当前页数做key
this.multipleSelection[this.page] = arr
},
/**
* 记忆勾选方法
**/
check() {
this.$nextTick(() => {
if (this.multipleSelection[this.page]) {
/**
* 注意：一定要 multipleSelection 跟表格数据比对，比对成功的使用表格数据的值设置勾选。
**/
this.tableData1.map(val => {
// val.id 改为自己要比对的值
if (this.multipleSelection[this.page].has(val.id)) {
this.$refs.multipleTable.toggleRowSelection(val);
}
})
}
})
},
/**
* 模拟分页
**/
pageChange() {
this.tableData1 = [];
let count = this.page * 3;
let num = (this.page * 3) - 3;
for (let i = num; i < count; i++) {
this.tableData1.push(this.tableData[i])
}
this.check()
}
}
}
</script>
