关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态
更新时间：2024年03月11日 10:52:15 作者：Ersonnnn
这篇文章主要介绍了关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态
先说下需求
表格导出功能。
用户可以自定义选择导出的表格数据。
遇到的问题
使用el-table组件的selection属性，可以实现多选表格数据的功能。
但是el-table组件在翻页的时候，不会记录上一页的选项，再切换回上一页时，之前勾选过的选项会被清空。
解决方案
使用toggleRowSelection()方法设置勾选项。
思路
之前是使用一个数组记录当前页选中的选项，现在用一个数组记录每一页选中的选项。
Step1：
在selection-change事件中绑定以下方法。
需要注意的是，每次换页的时候，如果之前有勾选选项，则表格选择项会发生变化（之前勾选，换页之后不勾选），触发该函数，所以需要在换页时增加一个标志量，判断是由于换页触发的该函数还是由于勾选变化触发的该函数。
Step2：
在换页之后，使用toggleRowSelection() 方法，将之前勾选中的选项重新勾选。
我之前是放在换页函数中的，发现没有重新渲染，参考这篇文章后：
得知了toggleRowSelection() 函数需要在页面渲染完毕之后才有效，而每次换页，数据都会进行更新，要重新渲染页面，所以需要放在this.$nextTick中
于是，代码如下：
这样，就能在换页时，将原来在该页勾选的数据重新选中了。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue echarts画甘特图流程，甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况2022-09-09
Vue3中toRef、toRefs都是与响应式数据相关的，本文主要来给大家讲解一下Vue3中的toRef和toRefs的使用，感兴趣的朋友跟随小编一起看看吧2023-01-01
这篇文章主要介绍了vue项目动态设置页面title及是否缓存页面的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue cli3 库模式搭建组件库并发布到 npm，以下一个简单的颜色选择器插件 vColorPicker 讲述从开发到上线到npm的流程,需要的朋友可以参考下2018-10-10
使用webpack-obfuscator进行代码混淆及报错解决过程
随着前端应用的复杂度增加,保护客户端的JavaScript代码变得更为重要,webpack-obfuscator插件通过对代码进行混淆,如变量重命名、字符串加密等,提高代码的保密性,防止源码被轻易查看或修改2024-10-10
这篇文章主要介绍了简单了解Vue + ElementUI后台管理模板,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-04-04
本文通过实例代码给大家介绍了vue仿百度搜索功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-02-02
Vue项目代码之路由拆分、Vuex模块拆分、element按需加载详解
这篇文章主要介绍了Vue项目代码之路由拆分、Vuex模块拆分、element按需加载,项目较大路由较多时，路由拆分是一个不错的代码优化方案，按不同业务分为多个模块，结构清晰便于统一管理，本文通过示例给大家详细讲解，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue自定义一个v-model的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
拖拽插件sortable.js实现el-table表格拖拽效果
本文主要介绍了拖拽插件sortable.js实现el-table表格拖拽效果，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
最新评论