el-table中多选一层一层选

### 实现层级结构的多选功能 为了在 `el-table` 中实现层级结构的多选功能，可以利用 `row-key` 属性来唯一标识每一行的数据，并通过自定义逻辑处理子节点的选择状态。当父节点被选中时，其所有的子节点也会自动被选中；反之亦然。 #### 自动选择子项和取消选择子项 对于父子级联的选择行为，在监听到某一行的选择变化事件 (`@selection-change`) 后，可以通过遍历当前行及其后代节点来进行批量操作： ```javascript methods: { selectionChangeHandle(selection) { // 获取所有已选项ID集合 let selectedIds = new Set(); selection.forEach(item => { selectedIds.add(item.id); // 如果选择了某个父节点，则将其所有子孙节点也加入到selectedIds中 this.getDescendantIds(item).forEach(id => selectedIds.add(id)); }); // 更新表格中的全选框状态 this.dataList.forEach(rowData => { rowData._checked = selectedIds.has(rowData.id); // 设置子元素的状态与父元素一致 if (rowData.children && Array.isArray(rowData.children)) { rowData.children.forEach(childRow => { childRow._checked = rowData._checked; }); } }); console.log(selectedIds); }, getDescendantIds(node){ var ids=[]; function traverseChildren(children){ children.forEach((child)=>{ ids.push(child.id); if(child.children&&Array.isArray(child.children)){ traverseChildren(child.children); } }) } if(node.children&&Array.isArray(node.children)){ traverseChildren(node.children); } return ids; } } ``` 上述方法实现了当用户勾选某一节点时，该节点下的所有子节点都会同步被标记为已选中。同时，如果取消了对一个父节点的选择，那么它下面的所有子节点也将随之取消选择[^1]。 #### 使用 `reserve-selection` 特性保持之前的选择 为了让分页情况下仍能记住之前的选取情况，可以在 `<el-table-column>` 上加上 `reserve-selection=true` 的配置。这允许即使是在重新加载数据之后也能保留用户的原始选择结果[^2]。 ```html <template> <div class="app-container"> <!-- 表格 --> <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange" row-key="id" default-expand-all> <el-table-column type="selection" width="55" reserve-selection></el-table-column> ... </el-table> </div> </template> ``` 这样就完成了基本的功能需求——即在一个具有层次结构的数据集中提供更加灵活且直观的多选体验。