【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-tableref="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 更新后再设置勾选状态。

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