当前位置：首页 > news >正文

ElementUI Table 翻页缓存数据

news 2025/7/10 19:37:18

在这里插入图片描述
Element UI Table 翻页保存之前的数据,网上找了一些,大部分都是用**:row-key** 和 reserve-selection,但是我觉得有bug,我明明翻页了…但是全选的的个框还是勾着的(可能是使用方法不对,要是有好使的…请cute我一下…感谢)
所以自己写了一个…

思路:

手动勾选的时候,将数据保存
查看文档,发现有两个手动勾选触发的方法 select 和 select-all,这两个返回的都是当前选中的数据,所以我们可以直接保存
回显的话,我们调用官网给的方法 toggleRowSelection()
调用的位置在,请求数据的方法中,因为请求完数据后,数据一定是最新的,table列表一定会刷新…所以我们只要在列表渲染的数据里找到保存的数据就将其勾选.

代码如下,直接拷贝可用…因为是个demo,数据是写死变化的,根据自己的业务替换吧.

<template><!--table 翻页--><div><el-tableref="multipleTable":data="tableData"tooltip-effect="dark"style="width: 100%"@select-all="selectionChange"@select="selectionChange"><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><el-pagination@size-change="sizeChange"@current-change="currentChange":current-page="page.current":page-size="page.pageSize"layout="prev, pager, next":total="total"></el-pagination></div>
</template><script>
export default {data() {return {total: 4,page: {current: 1,pageSize: 2,},tableData: [{id: 0,date: '2016-05-03',name: '王小虎0',address: '上海市普陀区金沙江路 1518 弄',},{id: 1,date: '2016-05-03',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄',},],multipleSelection: [],}},methods: {currentChange(val) {this.page.current = valthis.getList()},sizeChange(val) {this.page.pageSize = valthis.page.current = 1this.getList()},getList() {if (this.page.current === 1) {this.tableData = [{id: 0,date: '2016-05-03',name: '王小虎0',address: '上海市普陀区金沙江路 1518 弄',},{id: 1,date: '2016-05-03',name: '王小虎1',address: '上海市普陀区金沙江路 1518 弄',},]} else {this.tableData = [{id: 2,date: '2016-05-03',name: '王小虎2',address: '上海市普陀区金沙江路 1518 弄',},{id: 3,date: '2016-05-03',name: '王小虎3',address: '上海市普陀区金沙江路 1518 弄',},]}// 根据查询出来的数据,回显勾选状态this.$nextTick(()=>{this.tableData.forEach(row =>{if(this.multipleSelection.some((row1)=> row.id === row1.id)){this.$refs.multipleTable.toggleRowSelection(row)}})})},selectionChange(val) {this.multipleSelection = val},},
}
</script>