elementUI 列表里面含有多選框，當翻頁的時候依然保持之前頁多選不變

el-table的type="selection"的使用

場景：el-table,type="selection"時，重新請求后，設置列表更新前的已勾選項

踩坑：在翻頁或者changPageSize之后，table的data會更新，之前勾選的選項會被清掉

 

 初次嘗試：

 

最快速的解決辦法如下：

element-UI 的table表格數據有提供多項框的功能,只要在表格列中多加一列就可以選擇表格的數據

但是有時候表格的數據是有分頁的,分頁一般是要重新請求后台數據,這樣上一頁也就是上一次請求的數據的選中狀態就沒有了.element提供了reserve-selection可以保存數據更新前選中的值,這個屬性還需要指定row-key.

先看下頁面的效果:

 

注意事項:

具體看代碼:

<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
          })