elementUI 列表里面含有多选框，当翻页的时候依然保持之前页多选不变

直接看代码 

<el-table
    :data="tableData6"
    :row-key="getRowKey"    // ← 重点看这里
    ref="buyerTable"
    height="300"
    @selection-change="handleSelectionChange"
    border
    style="width: 100%">
    <el-table-column
      type="selection"
      :reserve-selection="true"   // ← 这里也是重点
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名">
    </el-table-column>
    <el-table-column
      prop="amount1"
      sortable
      label="数值 1">
    </el-table-column>
    <el-table-column
      prop="amount2"
      sortable
      label="数值 2">
    </el-table-column>
    <el-table-column
      prop="amount3"
      sortable
      label="数值 3">
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleBuyerSizeChange"
    @current-change="handleBuyerCurrentChange"
    :current-page="currentBuyerPage"
    :page-sizes="[5, 10, 15, 20]"
    :page-size="buyerPageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="buyerTotalCount">
  </el-pagination>

js代码

methods: {
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },

    // 列表选择,val选中的表格行数据
    handleSelectionChange (val) {
      console.log(val)
    },

    // 清空选择的值
    clearSelect () {
      this.$refs.buyerTable.clearSelection()
    }
}

注意：

row.id 最好不要重复，不然会报错了，如果id有重复的可以采用如下解决办法来设置不同的id值

this.recordList = data.content.map((v,index) => {
     this.$set(v, 'id', v.messageId+index)
     return v
})

本博客仅用于记录工作遇到的问题，感谢 front-gl 提供支持，侵权立删