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

ElementUI Table 翻页缓存数据

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

思路:

  • 手动勾选的时候,将数据保存
    查看文档,发现有两个手动勾选触发的方法 selectselect-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>
http://www.lryc.cn/news/141403.html

相关文章:

  • 使用 AutoGPTQ 和 transformers 让大语言模型更轻量化
  • AUTOSAR规范与ECU软件开发(实践篇)6.5 BswM模块概念与配置方法介绍
  • 1.1 VMware Workstation与Kali的安装和配置1
  • DDR与PCIe:高性能SoC的双引擎
  • C#_特性反射详解
  • 【跟小嘉学 Rust 编程】十三、函数式语言特性:迭代器和闭包
  • 时间复杂度和空间复杂度
  • mac docker 卡住解决
  • linux/centos zookeeper 使用记录
  • 用wireshark流量分析的四个案例
  • Oracle 时区详解
  • 仿mudou高性能高并发服务器
  • vue权限管理——菜单权限设置
  • 【LeetCode】228.汇总区间
  • Qt快速学习(二)--QMainWindow,对话框,布局管理器,常用控件
  • 群晖DSM下套件及系统网页服务器ssl证书自动更新
  • 【Flink】Flink架构及组件
  • React Navigation 开发准备
  • 前端面试:【前端安全】安全性问题与防范措施
  • [Linux]进程
  • 01-jupyter notebook的使用方法
  • pytestx容器化执行引擎
  • (动态规划) 剑指 Offer 42. 连续子数组的最大和 ——【Leetcode每日一题】
  • OLED透明屏曲面技术:创新突破引领显示行业未来
  • 视频云存储/安防监控EasyCVR视频汇聚平台分发rtsp流时,出现“用户已过期”提示该如何解决?
  • 调用paddleocr接口实现文本检测与识别,并在图像中显示识别结果
  • 如何提升winform程序性能
  • 按钮权限控制
  • 【脚本式设置环境变量】
  • 软件开发bug问题跟踪与管理