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

需求分析
在作項目的時候遇到了一個這樣需求，用戶在選擇沒有結單的Table的時候，能夠選擇多個沒有支付的訂單進行加入一個統一結帳的「購物車」中，那麼能夠選擇任意頁的，這個時候就遇到一個咱們常常會遇到的問題了，那就是當咱們切換頁碼的時候，以前用戶選擇的一些選項的選中狀態就會消失了，這個是咱們接受不了的，由於這樣的話，其實業務是錯的，因此今天就簡單的說一下怎麼解決這樣的問題，同時寫一下怎麼根據列中的某一項進行判斷該行的複選框是否是能夠被選中的狀態。

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

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

源碼

 1 <el-table  2             ref="multipleTable"
 3  @selection-change="handleSelectionChange"
 4  :data="tableData_no_statement"
 5  stripe  6  size="mini"
 7  :row-key="getRowKeys"
 8  :cell-style="{textAlign:'center'}"
 9  :header-cell-style="{background:'#303A41',color:'#fff',fontSize:'x-small',textAlign:'center'}"
10  style="width: 100%;margin-top: 10px">
11             <el-table-column 12               type="selection"
13  :selectable="selectable"
14  :reserve-selection="true"
15  width="55">
16             </el-table-column>
17 </el-table>

 1   /**  2  * @getRowKeys 設置回顯的函數  3  * @parmas row 當前行的數據，須要一個惟一的標識來標記是哪個被選中了  4     */
 5  getRowKeys(row) {  6           return row.id;  7  },  8      /**  9  * @selectable 設置不可點擊的狀態 10  * @param row.pay_status === 0 是未支付的狀態，這樣的狀態是能夠選擇的。未支付的是能夠被選中的，已支付的是不能夠被選中的 11        */
12  selectable(row,index){ 13         if(row.pay_status === 0){ 14            return true; 15         }else{ 16            return false; 17  } 18       },

總結 簡易型代碼

1 <el-table :row-key="rowKey">
2      <el-table-column type="selection" :reserve-selection="true"></el-table-column>
3 </el-table>
4 methods: { 5  rowKey (row) { 6  return row.id 7  } 8 }

也可清空 選中狀態

this.$refs.multipleTable.clearSelection();