问题描述:

技术栈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这个事件用来保存选中数据。

总结

用成熟的框架提供的组件,一些常见的坑基本开发人员都已经处理好了,所以我 们要做的其实就是仔细阅读文档,找到相应的解决办法,而不是盲目的自己去撸代码

Logo

前往低代码交流专区

更多推荐