<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', }, { name: '王小虎2', }, { name: '王小虎3', }, { name: '王小虎4', }, { name: '王小虎5', }, { name: '王小虎6', }, { name: '王小虎7', }, { name: '王小虎8', }, { name: '王小虎9', },], multipleSelection: {} } }, mounted() { this.pageChange() }, methods: { /** * 手动勾选数据行的 Checkbox 时触发 **/ handleSelectionChange(val) { // 使用当前页数做key this.multipleSelection[this.page] = val }, /** * 记忆勾选方法 **/ check() { this.$nextTick(() => { if (this.multipleSelection[this.page]) { /** * 注意:一定要multipleSelection跟表格数据比对,比对成功的使用表格数据的值设置勾选。 **/ this.multipleSelection[this.page].map(item => { this.tableData1.map(val => { // item.name === val.name 改为自己要比对的id值 if (item.name === val.name) { 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>
Vue3 Element Plus Table多选框分页记忆选中回显
47 min read