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();