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

2022-08-15  本文已影响0人  kurumi_feng

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>
上一篇 下一篇

猜你喜欢

热点阅读