el-table 翻页后保留所勾选项

Posted 2023-04-22

参考技术A

在本周的开发中，碰到一个表格翻页之后，仍然保留所勾过的选项的功能。在原组件中，并没有这样的功能，所以经过查找分析，就有了下面的一个例子，分析给大家。

查找资料后可得

表格单选

因为翻页之后，点选时selection会出现undefined,所以这里需要进行判断 这里可以通过判断选择selection中有没有row，就可以判断出是增加还是删减

表格全选

通过selection数组长度判断是选中还是取消

添加时判断 selectedItems 中是否存在当前row数据，存在则直接 return

取消选中

当 selectedItems 为空数组时，则直接 return

这里使用 this.$nextTick 是保证表格渲染完成之后，才添加选中效果。 selectedItem 是筛选循环当前行 row 是否在当前表格 tableData 数据中。

element-ui中的table可分页多选功能-记住上一页勾选数据

参考技术A vue中使用el-table,点击下一页后常需要记住上一页所勾选的数据

2.然后第一列，即有多选框的一列，添加:reserve-selection="true"

3.然后在methods中添加函数：

如果需要清除勾选数据(刷新也页面跳转后会自动清除)