4-2-vue框架-第三方ui组件elementui-vue- element-ui table复选框翻页记忆与清除

背景

在进行表格操作时，使用element-ui 表格控件时加入复选框后默认是无法进行翻页记忆的。

翻页记忆

在进行复选框翻页记忆操作时需要在表格与复选框中分别添加，这个两个参数在翻页复选中必须添加，否则无效。

:row-key="getRowKeys"	// 获取每行的信息
:reserve-selection="true"	// 数据更新之后保留之前选中的数据

// 获取row的key值的方法
getRowKeys(row) {
    return row.id;
},

示例

<el-table
    :data="buyerTable"
    :row-key="getRowKey"
    ref="buyerTable"
    @selection-change="handleSelectionChange"
    border>
    <el-table-column
      type="selection"
      :reserve-selection="true"
      width="55"></el-table-column>
</el-table>
 
methods: {
    // 保存选中的数据id,row-key就是要指定一个key标识这一行的数据
    getRowKey(row) {
      return row.id
    },
 
    // 列表选择,val选中的表格行数据
    handleSelectionChange(val) {
      console.log(val)
    },
 
    // 清空选择的值
    clearSelect() {
      this.$refs.buyerTable.clearSelection()
    }
}