Bootstrap

Elementui中 toggleRowSelection() 方法实现分页切换时记录之前选中的状态

先说下需求:表格导出功能。用户可以自定义选择导出的表格数据。

遇到的问题:使用el-table组件的selection属性,可以实现多选表格数据的功能。但是el-table组件在翻页的时候,不会记录上一页的选项,再切换回上一页时,之前勾选过的选项会被清空。

解决方案:使用toggleRowSelection()方法设置勾选项。

思路:之前是使用一个数组记录当前页选中的选项,现在用一个数组记录每一页选中的选项

    Step1: 在selection-change事件中绑定以下方法。需要注意的是,每次换页的时候,如果之前有勾选选项,则表格选择项会发生变化(之前勾选,换页之后不勾选),触发该函数,所以需要在换页时增加一个标志量,判断是由于换页触发的该函数还是由于勾选变化触发的该函数。

                    

    Step2:在换页之后,使用 toggleRowSelection() 方法,将之前勾选中的选项重新勾选。我之前是放在换页函数中的,发现没有重新渲染,参考这篇博客后:

;