vue+element Table切換頁碼時被選中狀態不變

需求分析
在做項目的時候遇到了一個這樣需求，用戶在選擇沒有結單的Table的時候，可以選擇多個沒有支付的訂單進行加入一個統一結賬的“購物車”中，那么可以選擇任意頁的，這個時候就遇到一個我們經常會遇到的問題了，那就是當我們切換頁碼的時候，之前用戶選擇的一些選項的選中狀態就會消失了，這個是我們接受不了的，因為這樣的話，其實業務是錯的，所以今天就簡單的說一下怎么解決這樣的問題，同時寫一下怎么根據列中的某一項進行判斷該行的復選框是不是可以被選中的狀態。

selectable：僅對 type=selection 的列有效，類型為 Function，Function 的返回值用來決定這一行的 CheckBox 是否可以勾選，function類型
 
reserve-selection：僅對 type=selection 的列有效，類型為 Boolean，為 true 則會在數據更新之后保留之前選中的數據（需指定 row-key） boolean類型
 
row-key：行數據的 Key，用來優化 Table 的渲染；在使用 reserve-selection 功能與顯示樹形數據時，該屬性是必填的。類型為 String 時，支持多層訪問：user.info.id，但不支持 user.info[0].id，此種情況請使用 Function。 funtion類型

我們主要是用這個三個參數解決這個問題。

源碼

<el-table
            ref="multipleTable"
            @selection-change="handleSelectionChange"
            :data="tableData_no_statement"
            stripe
            size="mini"
            :row-key="getRowKeys"
            :cell-style="{textAlign:'center'}"
            :header-cell-style="{background:'#303A41',color:'#fff',fontSize:'x-small',textAlign:'center'}"
            style="width: 100%;margin-top: 10px">
            <el-table-column
              type="selection"
              :selectable="selectable"
              :reserve-selection="true"
              width="55">
            </el-table-column>
</el-table>

  /**
    * @getRowKeys 設置回顯的函數
    * @parmas row 當前行的數據，需要一個唯一的標識來標記是哪一個被選中了
    */
     getRowKeys(row) {
          return row.id;
     },
     /**
       * @selectable 設置不可點擊的狀態
       * @param row.pay_status === 0 是未支付的狀態，這樣的狀態是可以選擇的。未支付的是可以被選中的，已支付的是不可以被選中的
       */
      selectable(row,index){
        if(row.pay_status === 0){
           return true;
        }else{
           return false;
        }
      },

總結 簡易型代碼

<el-table :row-key="rowKey">
     <el-table-column type="selection" :reserve-selection="true"></el-table-column>
</el-table>
methods: {
   rowKey (row) {
      return row.id
    }
}

也可清空 選中狀態

this.$refs.multipleTable.clearSelection();