el-table翻页记录已选状态 el-table翻页回显记录已选状态

需求：点击第一页选中三条数据，点击第二页选中1条，再点击第一页显示选中的三条…

template

@selection-change="selectionTableDtaChange"是勾选会触发的事件
:row-key="getRowKeys是跨页多选row-key"
type="selection"设置为:reserve-selection="true"

<el-table ref="elderTable" :data="elderData" style="width:100%" v-loading="loading"   @selection-change="selectionTableDtaChange" :row-key="getRowKeys">
        <el-table-column type="selection" align="center" width="40" :reserve-selection="true"></el-table-column>
 </el-table>

data数据

secltableData:[],//回显(所有选中状态)
secltId: [], //所有选中id
elderData: [],//表格数据

methods方法

   //记录翻页选中
    getRowKeys(row) {
      return row.elderId
    },
    // 选择的表单（对选中数据处理，需要处理数据，用于传递给后台）
    selectionTableDtaChange (selection) {
      this.secltableData = selection 
      // 去重获取被选中的id值存入到数组中
      this.secltId = []
      for (let selectedItem of selection) {
        this.secltId.push(selectedItem.elderId)
      }
    },
    //回显
    showSeclectRow () {
      if (this.secltableData.length > 0) {
        this.secltableData.forEach(row => {
          this.elderData.forEach((item) => {
            if (row.elderId === item.elderId) {
              this.$refs.elderTable.toggleRowSelection(item, true)
            }
          })
        })
      }
    },
    // 翻页数据更新需要渲染记录id(回显)
    list (data, page) {
      // 把子组件查询到的结果赋值给elderData，用于table显示数据
      this.elderData = data
      // 初始化用户选择的表格数据
      this.$nextTick(_ => {
        this.showSeclectRow()
      })
    },