分页时,仍然保留勾选的数据和选中的状态。
实现思路:利用对象属性不可重复的特性
代码如下:
<template> <div> <el-table ref="table" :data="tableData" size="small" height="100%" @selection-change="handleSelectChange" @select="handleSelect" > <el-table-column width="50" type="selection" /> <el-table-column type="index" label="序号" width="50"> <template scope="scope"> <span>{{ (pageInfo.pageNo - 1) * pageInfo.pageSize + scope.$index + 1 }}</span> </template> </el-table-column> <el-table-column label="名称1" /> <el-table-column label="名称2" /> <el-table-column label="名称3" /> <el-table-column label="名称4" /> <el-table-column label="名称5" /> </el-table> </div> </template> <script> export default { data() { return { tableData: [], selectedObj: {}, selectedData: [] } }, methods: { getList() { // 查数据的地方,处理分页选中状态 this.handleRowSelection(this.tableData) }, handleSelectChange(selection) { // 全选取消,删除当前页所有数据 if (selection.length === 0) { this.tableData.forEach(item => { delete this.selectedObj[item.id] }) } // 勾选数据 添加 selection.forEach(item => { this.selectedObj[item.id] = item }) // 获取所有分页勾选的数据 this.selectedData = [] for (const key in this.selectedObj) { this.selectedData.push(this.selectedObj[key]) } }, handleSelect(selection, row) { // 取消单个勾选时,删除对应属性 if (!selection.some(item => item.id === row.id)) { delete this.selectedObj[row.id] } }, // 处理当前列表选中状态 handleRowSelection(data) { data.forEach(item => { if (this.selectedObj[item.id]) { this.$nextTick(() => { this.$refs.table.toggleRowSelection(item) }) } }) } } } </script>