Vue 使用 ElementUI 多选表格记录选中状态

作者: kurumi_feng | 来源:发表于2022-08-15 12:57 被阅读0次

vue版本：2.6.14
ElementUI版本：^2.15.8

场景描述：在vue中使用ElementUI中的多选表格，在根据菜单项更新表格数据的时候之前选中的行状态未被保存。
解决方法：在 type 为 selection 那一列添加 :reserver-selection="true"，同时在 el-table 中添加 :row-key="getRowKeys" 并实现 getRowKeys 方法，返回行数据唯一标记值，我这里是使用 id 进行返回。
代码如下：

<template>
  <el-table ref="peopleTable" :data="peopleTableData" class="user-table"  :row-key="getRowKeys">
            <el-table-column type="selection" :reserve-selection="true">
            </el-table-column>
  </el-table>
  ...
</template>
<script>
export default {
  ...
  methods: {
    getRowKeys(row) {
      return row.id; // 返回唯一标记值，这里的 id 是唯一的
    },
    ...
  }
}
</script>