vue + element-ui table组件多页选择数据回显,分页记录保存选中的数据
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
问题描述:
技术栈vue+element-ui,数据列表就是对element-ui的table组件和Pagination 组件的简单应用,每页10条数据,数据前有选择按钮,可以切换这条数据的选中状态,切换页码时会重新请求接口切换数据,同时也相当于重新渲染列表;
然后问题来了,当你想跨页选择数据时,会发现当前页选中的数据并不会保存下来,选中状态也不会保存下来,也就是说只能保留当前页的数据和状态,这不是一个天坑吗?
思前想后,准备动手搞个数组,实时记录数据id,然后自己匹配数据与状态;正准备动手撸代码时,忽然灵光一闪:这不科学,我这种渣渣都能想到的东西,ele团队那些牛人不可能放过这个坑,于是我又去看了下官方文档,然后,嘿嘿嘿。。。,看图
具体代码如下:
1.在el-table上添加row-key属性,
2.在type为selection的el-table-column上添加reserve-selection属性,值为true;注意只能在selection上使用
3.同时定义getRowKeys
<el-table ref="multipleTable" :data="tableData"
@selection-change="selectionChange" :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true">
</el-table-column>
</el-table>
getRowKeys(row) {
return row.id;
},
selectionChange这个事件用来保存选中数据。
总结
用成熟的框架提供的组件,一些常见的坑基本开发人员都已经处理好了,所以我 们要做的其实就是仔细阅读文档,找到相应的解决办法,而不是盲目的自己去撸代码
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)