[前端-组件库] Vue2项目中, element ui树形表格数据, selection多选选中父级无法选中子集问题解决

在 Element UI 的树形表格中，默认情况下选中父节点不会自动选中子节点，这是Element UI设计上的有意行为，为了保持组件的灵活性和可定制性。

---

原因分析:

• Element UI 的树形表格本质是视觉上的层级展示，不是真正的树形选择控件。
• 内置的多选功能只针对当前点击的节点，不会递归处理子节点。
• 需要手动实现父子联动逻辑。

---

实现父子联动逻辑

案例

在一个组织架构树形表格中，选中部门节点时自动选中该部门下的所有员工。

代码结构

<el-table
   ref="treeTable"	
   class="scroll-bar"
   v-if="refreshTable"
   v-loading="loading"
   :data="personnelList"
   row-key="personnelId"
   :default-expand-all="isExpandAll"
   :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
   @selection-change="handleSelectionChange"
   @select="handleSelect"
   :row-style="{height: '50px'}"
   height="60vh"
   :header-cell-style="{ background: '#FFFFFF' }"
 >
   <el-table-column type="selection" width="80" align="center" />
   
el-table>

解决方法

编写 element ui 的 table 组件的原生事件 @select, 指定一个方法 handleSelect。

/** 选择事件 **/
handleSelect(selection, row) {
  // selection: 当前选中的节点列表
  // row: 当前点击的节点
  this.toggleChildrenSelection(row, selection.includes(row))
},    

通过递归方法 toggleChildrenSelection，实现子节点的选中状态同步。

/** 递归 **/
toggleChildrenSelection(node, isSelected) {
  // node: 当前处理的节点
  // isSelected: 该节点的选中状态
  this.$refs.treeTable.toggleRowSelection(node, isSelected)

  if (node.children) {
    node.children.forEach(child => {
      this.toggleChildrenSelection(child, isSelected)
    })
  }
},

调用 table 组件的原生 API toggleRowSelection 方法，实现节点的选中状态切换。

现在勾选表格父行的数据, 旗下对应的子集行数据也会同步勾选中, 完成需求.