el-table勾选后页码跳转再返回，勾选状态消失的解决办法

最新推荐文章于 2024-06-19 11:23:30 发布

张嘉悦儿

最新推荐文章于 2024-06-19 11:23:30 发布

阅读量551

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_42234899/article/details/133916076

版权

1、需求：

要求el-table表格在第一页勾选数据后，在其他页再勾选一些数据后，再返回第一页，勾选的数据不丢失。

2、解决办法：

官方文档中有记录：

就这两个api即可解决。

3、上代码：

首先row-key是取函数或者字符串，无论哪一种，也就是取你勾选所在行的唯一标识，那就是取id了，即： :row-key="id"。

其次reserve-selection是对selection所在列有效，这个api的作用就是回显你之前所勾选的数据，留意，这个api是写在el-table-column标签内的。

<el-table
          ref="rightTable"
          :table="tableHeader"
          :hightlight="true"
          :loading="tableRightLoading"
          :items="tableRightData"
          @selectionChange="tableRightHandleSelectionChange"
          :isShowIndex="true"
          :rowKey="tableHeader.rowKey"
        >
<el-table-column type="selection" :reserveSelection="true"></el-table-column>
</el-table>

data(){
return {
tableHeader:{
rowKey: 'id'