element-ui table分页/筛选后保留勾选项

在使用elementui中的table时，有时会涉及到勾选完数据切换页数或者使用搜索框搜索后已勾选数据消失，而elementul有个属性可以处理这个情况，reserve-selection和row-key搭配使用。

使用步骤：

1. 在table上加上 :row-key=“getRowKey” （或者 row-key="id"若直接绑定id，则不需要第三步，取决于绑定的值是否可以直接拿到或者table是否抽离为公共组件）；
2. 在type=“selection” 那一列标签上写 :reserve-selection=“true”
3. 在methods中编写方法getRowKey

<template>
  <span>
      <el-table
      	ref="table"
        :row-key="getRowKey"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
         type="selection"
         :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
         prop="name"
         label="姓名"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </span>
</template>

<script>
export default {
    
    
  methods: {
    
    
    getRowKey(row) {
    
    
      return row.id;
    },
    handleSelectionChange (list) {
    
    
	  console.log('选中的数据', list)
	}
};
</script>