element table多选表格_ElementUi多选框表格,翻页选中有记忆功能保持默认选中

在用vue开发表格多选功能时，遇到一个翻页后需要保持之前选中的状态。简单说就是让表格翻页选中仍然有记忆功能。

我用的是ElementUi，不得不说ElementUi做的还是非常好的。

废话不多说，下面描述实现的步骤和代码

第一步：给表格添加 row-key

:data="data"

ref="tableData"

@selection-change="onSelectInvoiceItem"

:row-key="(row) => row.id"

@select-all="onSelectAll"

>

关键点：:row-key="(row) => row.id"

第二步：给多选框加默认选中功能

关键点：:reserve-selection="true"

切换分页持久化选中表格，其实关键代码就这2行

:row-key="(row)=>{ return row.id}"

:reserve-selection="true"

注意id需要唯一

其他可能用到的方法

@selection-change 会返回所有选中的数据

@select 会返回所有选中的数据及当前操作的数据

清空所有选中

this.$refs.table.clearSelection();//页面中有搜索或重置时可能会用到。

默认选中

this.$refs.table.toggleRowSelection(this.list[index]);//必须传表格的数据；以数组[下标]格式传递.

如果你是用的自定义的单选框，可以参考

单选框

:data="list"

ref="multipleTable"

:row-key="(row)=>{ return row.classId}"

@current-change="handleCurrentRadio"

style="width: 100%">

{{''}}

@current-change="handleCurrentRadio"会返回选中的数据。可以在这个事件用return false 来阻止选中

//label 和原生的value属性一样。 利用v-model来绑定唯一值，意味着label的值为唯一的。

//{{""}}为了让单选框不显示label。