求Vue Element UI的Table组件跨页多选的实现思路。

Question

Vue Element UI的Table列表的CHECKBOX实现跨分页多选，再次回到某页如果某行之前已选择则CHECKBOX要进行回显，最终要得到所有选择行的集合。求实现思路或者解决方案。

Answer 1

1.列表渲染时在tabelData中的各元素添加一个属性checked，默认为false;
2.给'el-tabel'元素绑定@select 及@select-all两个事件，在事件触发时设置row.check=！row.check，判断row.check分以下情况：
(1)为true时，且判断全局数组中没有这个id时，将id push进全局数组中，如this.selectDataIds.push(id);如果已经有这个id，那么不做处理;
(2)为false时，判断全局数组中有没有该选项的id，如果有，那么把它从数组中去除
3.翻页时，将会有新的数据，那么在获取tabelData成功的接口中回调时添加全局数组的id判断，如果当前渲染的id包含在this.selectDataIds中，意味着这个选项前期已经选择，需要回显，那么将默认的checked改为true
4.翻页之后正常重复操作就行了

Answer 2

row对象加上checked属性 在column的template里的el-checkbox里用v-model绑定即可

Answer 3

使用缓存吧，把你页数，当前页面选择的index保存一下，再根据页码去取，再初始化。

Answer 4

选中的时候把数据行的id存在一个数组中，这个数组在一页数据加载完后遍历一下，如果有id存在数组中就选中

Answer 5

你好 问题解决了吗
我也遇到同样的问题

Answer 6

你只需要在type为selection的el-table-column中添加:reserve-selection="true"

<el-table-column
  type="selection"
  width="60"
++  :reserve-selection="true"
/>

然后设置:row-key="(row)=>row.你的唯一标识"

<el-table
++ :row-key="(row)=>row.id"
>

这样多页勾选就可以记住之前的选择了，记得在完成操作后，调用 table实例.clearSelection() 清除选项