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.rhkb.cn/news/106738.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jsp 图书销售系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 JSP 图书销售系统是一套完善的java web信息管理系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为 TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.0&…

Vue实现Excel表格中按钮增加小数位数,减少小数位数功能,多用于处理金融数据

效果图 <template><div><el-button click"increaseDecimals">A按钮</el-button><el-button click"roundNumber">B按钮</el-button><el-table :data"tableData" border><el-table-column v-for&q…

POSTGRESQL 如何用系统函数来诊断权限问题

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…

win10 下运行 npm run watch-poll问题

背景&#xff1a;在本地练习laravel项目&#xff0c;windows 宝塔环境&#xff08;之前装过ubuntu子系统&#xff0c;很慢&#xff0c;就放弃了。有知道的兄弟说下&#xff0c;抱拳&#xff09;。以下命令我是在本地项目中用git bash里运行的&#xff0c;最好用管理员权限打开你…

ARM开发,stm32mp157a-A7核中断实验(实现按键中断功能)

1.实验目的&#xff1a;实现KEY1/LEY2/KE3三个按键&#xff0c;中断触发打印一句话&#xff0c;并且灯的状态取反&#xff1b; key1 ----> LED3灯状态取反&#xff1b; key2 ----> LED2灯状态取反&#xff1b; key3 ----> LED1灯状态取反&#xff1b; 2.分析框图: …

Leetcode 2235.两整数相加

一、两整数相加 给你两个整数 num1 和 num2&#xff0c;返回这两个整数的和。 示例 1&#xff1a; 输入&#xff1a;num1 12, num2 5 输出&#xff1a;17 解释&#xff1a;num1 是 12&#xff0c;num2 是 5 &#xff0c;它们的和是 12 5 17 &#xff0c;因此返回 17 。示例…

Django REST framework实现api接口

drf 是Django REST framework的简称&#xff0c;drf 是基于django的一个api 接口实现框架&#xff0c;REST是接口设计的一种风格。 一、 安装drf pip install djangorestframework pip install markdown # Markdown support for the browsable API. pip install …

[matlab]matlab配置mingw64编译器

第一步&#xff1a;下载官方绿色版本mingw64编译器然后解压放到一个非中文空格路径下面 比如我mingw64-win是我随便改的文件名&#xff0c;然后添加环境变量&#xff0c;选择用户或者系统环境变量添加下面的变量 变量名&#xff1a; MW_MINGW64_LOC 变量值&#xff1a;自己的m…

<C++> 内存管理

1.C/C内存分布 让我们先来看看下面这段代码 int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] {1, 2, 3, 4};char char2[] "abcd";char *pChar3 "abcd";int *ptr1 (int *) mal…

QGIS学习1-入门学习

QGIS作为一个广受欢迎的开源GIS&#xff0c;很多GIS的学生都了解过。但是因为学校老师都是教的Arcgis&#xff0c;因此很少去充分的学习。QGIS和arcgis一样&#xff0c;有完整的官方帮助文档&#xff0c;我也是要根据官方的帮助文档进行学习等。 https://www.qgis.org/zh-Hans/…

C++避坑——most vexing parse问题

1."坑"的问题是什么&#xff1f; 先看一段代码&#xff1a; class Functor { public:void operator()(){std::cout << "我是线程的初始函数" << std::endl;} };int main() {std::thread t(Functor());// 强制高速编译器这是一个构造函数!t.j…

HTTPS协议加密原理

目录 一、什么是HTTPS 二、什么是加密/解密 三、为什么要加密 四、常见的加密方式 1.对称加密 2. 非对称加密 五、HTTPS加密方式探讨 1.只使用对称加密 2.只使用非对称加密 3.非对称加密对称加密 4.非对称加密对称加密CA认证 六、总结 一、什么是HTTPS HTTP 协议&a…

机器学习,过拟合与欠拟合,正则化与交叉验证

目录 机器学习 过拟合与欠拟合 正则化与交叉验证 正则化 交叉验证 机器学习 的目的是使学到的模型不仅对已知数据而且对未知数据都能有很好的预测能力。 不同的机器学习方法会给出不同的模型。当损失函数给定时&#xff0c;基于损失函数的模型的训练误差&#xff08;tra…

neo4jd3拓扑节点显示为节点标签(自定义节点显示)

需求描述&#xff1a;如下图所示&#xff0c;我的拓扑图中有需要不同类型的标签节点&#xff0c;我希望每个节点中显示的是节点的标签 在官方示例中&#xff0c;我们可以看到&#xff0c;节点里面是可以显示图标的&#xff0c;现在我们想将下面的图标换成我们自定义的内容 那…

4.18 TCP 和 UDP 可以使用同一个端口吗?

目录 TCP 和 UDP 可以同时绑定相同的端口吗&#xff1f; 多个 TCP 服务进程可以绑定同一个端口吗&#xff1f; 重启 TCP 服务进程时&#xff0c;为什么会有“Address in use”的报错信息&#xff1f; 重启 TCP 服务进程时&#xff0c;如何避免“Address in use”的报错信息…

MAVEN利器:一文带你了解IDEA中如何使用Maven

前言&#xff1a; 强大的构建工具——Maven。作为Java生态系统中的重要组成部分&#xff0c;Maven为开发人员提供了一种简单而高效的方式来构建、管理和发布Java项目。无论是小型项目还是大型企业级应用&#xff0c;Maven都能帮助开发人员轻松处理依赖管理、编译、测试和部署等…

最新CMS指纹识别技术

指纹识别 1&#xff0e;CMS简介 CMS&#xff08;Content Management System&#xff0c;内容管理系统&#xff09;&#xff0c;又称整站系统或文章系统&#xff0c;用于网站内容管理。用户只需下载对应的CMS软件包&#xff0c;部署、搭建后就可以直接使用CMS。各CMS具有独特的…

【Linux】进程通信 — 信号(上篇)

文章目录 &#x1f4d6; 前言1. 什么是信号1.1 认识信号&#xff1a;1.2 信号的产生&#xff1a;1.3 信号的异步&#xff1a;1.4 信号的处理&#xff1a; 2. 前后台进程3. 系统接口3.1 signal&#xff1a;3.1 - 1 不能被捕捉的信号 3.2 kill&#xff1a;3.2 - 1 killall 3.3 ra…

vue 简单实验 自定义组件 局部注册

1.概要 2.代码 <html> </html> <script src"https://unpkg.com/vuenext" rel"external nofollow" ></script> <body><div id"counter"><component-a></component-a></div> </body&g…

浅尝OpenResty

文章目录 1. 写在前面2. 下载安装openresty2.1 下载Openresty2.2 设置nginx启动 3. 嵌入lua脚本4. 实践5. 小结 1. 写在前面 当一个域名中衍生出多个服务的时候&#xff0c;如果想要保持对外服务始终是一个域名&#xff0c;则需要通过nginx反向代理来实现。如果在转发的时候需…