最近有个项目,需要分页多选。一般来说勾选后点击下一页,上一页的所选中的东西都会被清空。所以研究了一番。
写个博客记录一下防止后面采坑!
其实很简单关键的步骤只有三步:
- 在el-table中添加: row-key="getId"
<el-table
ref="form"
:model="form"
:row-key="getId">
</el-table>
- 然后第一列,即有多选框的一列,添加: reserve-selection="true" (注意 type="selection" 必须这样写)
<el-table
ref="form"
:model="form"
:row-key="getID"
<el-table-column type="selection" :reserve-selection="true">
</el-table-column>
</el-table>
- 在methods中添加函数:
getId(row) {
return row.id //这个id需要换成自己所绑定的Key
}
- 完成后需要清空选中,不然会在下一个批量操作中记录上一次选中的数据:
getId(row) {
return row.id //这个id需要换成自己所绑定的Key
}