element-ui table组件属性：reserve-selection分页保留勾选项

element-UI 的table表格数据有提供多项框的功能,只要在表格列中多加一列就可以选择表格的数据
但是有时候表格的数据是有分页的,分页一般是要重新请求后台数据,这样上一页也就是上一次请求的数据的选中状态就没有了.element提供了reserve-selection可以保存数据更新前选中的值,这个属性还需要指定row-key。

示例代码：重点指定row-key，设置reserve-selection为true

    <!--  -->
    <el-table
      border
      ref="multipleTable"
      v-loading="tableLoading"
      :data="tableData"
      :row-key="getRowKeys" 
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="50"
        align="center"
        :reserve-selection="true"
      >
      </el-table-column>
      <el-table-column
        v-for="col in cols"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        align="center"
      ></el-table-column>
    </el-table>

方法调用：

methods: {
// 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKey (row) {
      return row.id
    },

    // 列表选择,val选中的表格行数据
    handleSelectionChange (val) {
      console.log(val)
    },

    // 清空选择的值
    clearSelect () {
      this.$refs.multipleTable.clearSelection()
    }
}