el-table多选框勾选回显 vue3

### Vue3 中实现 el-table 多选框勾选状态回显的方法 在 Vue3 的项目中，`el-table` 组件的多选框功能可以通过 `toggleRowSelection` 方法来设置某一行或多行的勾选状态。为了实现多选框的状态回显，通常需要结合后端返回的数据中的特定字段（如 `isSelect`），并通过 `$refs` 访问表格实例调用该方法。 以下是具体的实现方式： #### 数据准备 假设从后端获取到的数据结构如下： ```javascript const tableData = [ { id: 1, name: 'Item 1', isSelect: true }, { id: 2, name: 'Item 2', isSelect: false }, { id: 3, name: 'Item 3', isSelect: true } ]; ``` 其中，`isSelect` 字段用于标记当前行是否被勾选。 --- #### 实现代码 通过 `this.$nextTick()` 确保 DOM 更新完成后执行操作，并利用 `toggleRowSelection` 设置每一行的勾选状态。 ```vue <template> <el-table ref="multipleTable" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="名称" width="180"></el-table-column> </el-table> </template> <script> import { onMounted, reactive, toRefs } from "vue"; export default { setup() { const state = reactive({ tableData: [ { id: 1, name: "Item 1", isSelect: true }, { id: 2, name: "Item 2", isSelect: false }, { id: 3, name: "Item 3", isSelect: true }, ], }); const handleSelectionChange = (val) => { console.log(val); }; const initSelection = () => { nextTick(() => { state.tableData.forEach((item) => { if (item.isSelect) { this.$refs.multipleTable.toggleRowSelection(item, true)[^2]; } }); }); }; onMounted(() => { initSelection(); }); return { ...toRefs(state), handleSelectionChange, }; }, }; </script> ``` --- #### 关键点解析 1. **数据绑定** 将后端返回的数据绑定至 `el-table` 的 `data` 属性上，确保每一条记录都带有 `isSelect` 字段以指示其初始勾选状态。 2. **DOM 渲染完成后的回调** 使用 `this.$nextTick()` 或 Vue3 提供的 `nextTick` API，在组件渲染完毕后再执行逻辑，从而避免因 DOM 还未更新而导致的操作失败[^3]。 3. **动态设置勾选状态** 遍历数据列表，对于满足条件的项（即 `isSelect === true`），调用 `toggleRowSelection` 方法将其设为已勾选状态[^4]。 4. **注意事项** 如果使用的 UI 库不是 Element Plus 而是其他库（如 Umy-UI），可能需要调整访问表格实例的方式，例如 `.singleTable` 替代默认的 `multipleTable`[^1]。 --- ###