【JS】element-ui table展示勾选状态

element-ui table 我将勾选的值存在multipleSelection中，在表格更新后，再遍历，来展示勾选状态。这样可行吗？

在使用 Element UI 的 el-table 组件时，将勾选的值存储在 multipleSelection 中，然后在表格更新后通过遍历这些值来展示勾选状态，这种做法理论上是可行的，但在实际操作中有一些需要注意的地方，下面为你详细分析。

实现思路

1. 存储勾选的值：当用户在表格中勾选行时，el-table 会触发 selection-change 事件，你可以在这个事件的处理函数中将勾选的行数据存储到 multipleSelection 数组中。
2. 表格更新：当表格数据更新时，需要重新设置表格的勾选状态。可以通过遍历 multipleSelection 数组，使用 el-table 的 toggleRowSelection 方法来设置每一行的勾选状态。

示例代码

<template>
  <div>
    <el-button @click="updateTableData">更新表格数据</el-button>
    <el-table
      ref="tableRef"
      :data="tableData"
      @selection-change="handleSelectionChange"
      style="width: 100%"
      multiple
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 }
      ],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
    },
    updateTableData() {
      // 模拟表格数据更新
      this.tableData = [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
        { id: 4, name: '赵六', age: 35 }
      ];
      // 重新设置勾选状态
      this.$nextTick(() => {
        this.multipleSelection.forEach(item => {
          const targetRow = this.tableData.find(row => row.id === item.id);
          if (targetRow) {
            this.$refs.tableRef.toggleRowSelection(targetRow, true);
          }
        });
      });
    }
  }
};
</script>

代码解释

1. handleSelectionChange 方法：当用户勾选或取消勾选表格行时，该方法会被调用，将当前勾选的行数据存储到 multipleSelection 数组中。
2. updateTableData 方法：模拟表格数据更新，更新 tableData 数组。在数据更新后，使用 $nextTick 确保 DOM 已经更新，然后遍历 multipleSelection 数组，使用 toggleRowSelection 方法设置每一行的勾选状态。

注意事项

• 数据唯一性：确保表格数据中的每一行都有一个唯一的标识（如示例中的 id），这样才能准确地找到需要勾选的行。
• $nextTick 的使用：由于 Vue 的响应式原理，数据更新后 DOM 不会立即更新，因此需要使用 $nextTick 确保在 DOM 更新后再设置勾选状态。

通过以上方法，你可以在表格更新后保留之前的勾选状态。