在用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。