el-table 是 Element UI 中使用频率最高的组件之一，它的树形数据展示能力在菜单管理、部门管理、权限分配等场景中非常实用。但不少人在给树形表格加上多选列之后发现：勾选父节点，子节点的复选框纹丝不动；或者勾选了子节点，父节点也不显示半选状态。这并不是 Element UI 的 bug，而是官方 selection 列在设计时并没有内置树形联动的逻辑，需要开发者自己处理父子节点之间的勾选联动。本文就来详细分析这个问题产生的原因，并给出几种完整的解决方案。
一、问题原因深度分析
首先要明确一点：el-table 的多选列是通过 type="selection" 定义的，它的勾选逻辑是基于一个内部的 selection 数组实现的。当你点击某一行的复选框时，组件只是把这一行的数据对象加入或移出这个数组，它完全不知道这一行下面还有 children，更不会去递归处理子节点。这就解释了为什么勾选父节点后子节点没有反应——因为组件压根没有做这件事。
第二个常见原因是 row-key 没有设置，或者设置的 key 字段值存在重复。树形表格必须依赖唯一标识来追踪每一行的展开、勾选状态，如果 key 重复或者缺失，组件内部的状态映射就会出现错乱，表现为复选框忽明忽暗、勾选不生效等奇怪现象。使用树形表格时，row-key 是必填项，这一点在官方文档中有明确说明。
第三个原因是数据更新时机的问题。有些开发者在 created 钩子里异步拿到数据后直接赋值给 tableData，然后立刻调用 toggleRowSelection 去回显勾选状态，结果发现不生效。这是因为 el-table 内部需要先完成一次渲染，行对象才会被注册到内部的状态管理中。正确的做法是在 $nextTick 之后再调用回显方法，或者使用 ref 拿到表格实例后再操作。
二、基础配置：正确的模板写法
解决问题之前，先把基础配置写对。下面是一个完整的树形多选表格模板，注意 row-key 必须绑定唯一字段，default-expand-all 根据需要决定是否展开全部，:tree-props 用来指定 children 字段和 hasChildren 字段。
<template>
<el-table
ref="tableRef"
:data="tableData"
row-key="id"
border
default-expand-all
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
@select="handleSelect"
@select-all="handleSelectAll"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="code" label="编码" />
</el-table>
</template>这段代码中最关键的就是 row-key="id"。如果去掉这一行，在数据量较大或者存在嵌套结构时，复选框和展开行都会出现状态错乱。另外要注意，如果后续有翻页且需要跨页保留选中，可以在 el-table-column 上加 reserve-selection 属性，但它必须配合 row-key 一起使用，否则会直接报错。
三、核心方案：递归实现父子勾选联动
基础配置正确之后，真正的联动逻辑需要监听 select 事件自己实现。思路是：当某个节点被勾选或取消勾选时，递归找到它的所有子孙节点，逐一调用表格实例的 toggleRowSelection 方法；同时向上查找父节点，根据子节点的选中情况决定父节点是勾选还是取消。为了能从子节点快速找到父节点，建议在数据加载后给每个节点维护一个指向父节点的引用。
export default {
data() {
return {
tableData: [],
childToParent: new Map()
};
},
methods: {
// 数据加载后建立父子映射关系
buildParentMap(list, parent) {
list.forEach(item => {
if (parent) {
this.childToParent.set(item, parent);
}
if (item.children && item.children.length) {
this.buildParentMap(item.children, item);
}
});
},
// 收集某个节点及其所有子孙节点
collectDescendants(node, result = []) {
result.push(node);
if (node.children && node.children.length) {
node.children.forEach(child => this.collectDescendants(child, result));
}
return result;
},
handleSelect(selection, row) {
const selected = selection.some(item => item.id === row.id);
const table = this.$refs.tableRef;
// 联动所有子孙节点，状态与当前行保持一致
this.collectDescendants(row).forEach(node => {
if (node !== row) {
table.toggleRowSelection(node, selected);
}
});
// 向上联动父节点
this.syncParentState(row);
},
syncParentState(node) {
const parent = this.childToParent.get(node);
if (!parent) return;
const table = this.$refs.tableRef;
const allSelected = parent.children.every(child =>
this.isSelected(child)
);
table.toggleRowSelection(parent, allSelected);
this.syncParentState(parent);
},
isSelected(node) {
// 判断节点本身及其子节点是否全部选中
return this.$refs.tableRef.selection.some(item => item.id === node.id);
}
}
}这段代码的逻辑分为三层：向下递归联动子孙、向上同步父节点状态、通过 Map 建立反向索引避免每次都全树遍历。其中 buildParentMap 要在数据赋值后立即调用一次。需要注意的是，Element UI 的 toggleRowSelection 接收的必须是表格 data 中真实存在的对象引用，如果你用 JSON 深拷贝后的对象去调用，方法会静默失败，这也是很多人复选框不生效的一个隐蔽原因。
关于全选按钮的处理，select-all 事件触发时不会携带具体行信息，此时 selection 参数就是当前全部选中的行（表格扁平化后的所有可见行）。如果希望全选时包含所有层级的数据，建议在事件回调中对比 selection 和扁平化后的全量数据长度，再决定是否手动补齐子节点的勾选状态。
四、数据回显与常见踩坑点
编辑场景下经常需要回显勾选状态，比如把用户之前勾选的权限 id 列表重新打上勾。很多人的写法是遍历数据直接调用 toggleRowSelection，结果发现父节点勾不上，原因是父节点可能不在返回的 id 列表中，但它的子节点在。正确做法是先勾子节点，再判断父节点的子节点是否全部命中，命中则补勾父节点：
async loadData() {
const res = await fetchList();
this.tableData = res.data;
this.buildParentMap(this.tableData, null);
this.$nextTick(() => {
this.restoreSelection(this.tableData, this.selectedIds);
});
},
restoreSelection(list, ids) {
const table = this.$refs.tableRef;
list.forEach(node => {
const children = node.children || [];
if (children.length) {
// 有子节点，先递归处理子节点，再根据结果决定父节点
this.restoreSelection(children, ids);
const allHit = children.every(c => this.isNodeChecked(c, ids));
if (allHit) table.toggleRowSelection(node, true);
} else {
if (ids.includes(node.id)) {
table.toggleRowSelection(node, true);
}
}
});
}除了回显，还有几个高频踩坑点值得注意。第一，懒加载的树形表格（通过 load 属性按需加载子节点）中，子节点是异步请求回来的新对象，之前建立的 parent 映射会丢失，需要在 load 回调里重新补充映射关系。第二，如果数据中 children 为空数组，建议将其置为 undefined 或删除该字段，否则父节点会显示一个可以点击的展开箭头，点开却是空的，用户体验很差。第三，提交表单时如果要收集所有勾选项，不要直接读 selection，因为父节点勾选后 selection 中可能同时包含父子节点，通常需要根据业务过滤出叶子节点，可以借助前面写好的 collectDescendants 工具函数配合判断 children 是否为空来实现。
总结一下，子节点选中后不打勾的根本原因是 el-table 的 selection 列不感知树形层级，解决方案就是监听 select 事件，通过 toggleRowSelection 配合递归算法自己实现父子联动。只要保证 row-key 唯一、操作的是数据源的真实对象引用、回显放在 $nextTick 中执行，这个问题就能稳定解决。
Element UIel-table树形表格勾选修改时间：2026-09-15 18:10:44