el-tree 子节点勾选父节点也勾选

### el-tree 组件中子节点勾选父节点自动勾选的实现 为了实现在 `el-tree` 中当子节点被勾选时其父节点也会自动被勾选的效果，可以利用 Element UI 提供的相关属性和事件处理机制。具体来说，在配置树形控件时应关注两个方面： #### 设置级联选择行为 通过设置 `check-strictly=false` 属性可以让父子节点之间的关联更加紧密，即如果某个子项被选中，则它的上级项目也将一同被标记为已选状态。 ```html <el-tree :data="treeData" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" :check-strictly="false"> <!-- 关键点 --> </el-tree> ``` 此设置意味着一旦选择了任意一个后代节点，祖先节点将会随之更新它们的选择状态[^1]。 #### 处理节点变化逻辑 对于更复杂的场景下可能还需要自定义一些业务逻辑来确保正确的行为模式。可以通过监听 `check-change` 事件并编写相应的回调函数来进行额外的操作控制。每当发生勾选项变动时都会触发该事件，并传入三个参数：变更后的节点对象、是否已被勾选以及半选状态标志位。 ```javascript methods: { handleCheckChange(data, checked, indeterminate) { const parent = data.parent; let allChildrenChecked = true; function checkAllChildren(node){ if(!node.children || !Array.isArray(node.children)){ return false; } for(let i=0;i<node.children.length;i++){ if (!this.$refs.tree.getNode(node.children[i].id).checked){ allChildrenChecked = false; break; } } } // 如果当前节点有父节点且不是根节点 while(parent && parent.id !== undefined){ checkAllChildren(parent); if(allChildrenChecked === true){ this.$refs.tree.setChecked(parent,true,false); // 只影响父节点本身的状态而不传播给其他兄弟节点 }else{ this.$refs.tree.setChecked(parent,false,false); } parent = parent.parent; // 移动到上一层继续判断直至到达顶层或满足条件为止 } } } ``` 上述代码片段展示了如何基于特定需求调整父节点及其子孙间的相互关系，确保即使部分而非全部子元素处于选定状态下也能合理反映于UI界面上[^3]。 ### 注意事项 需要注意的是，以上解决方案适用于大多数常规情况下的父子节点联动效果展示。但在某些特殊情况下（比如异步加载的数据源），还需进一步考虑性能优化等问题以保证用户体验流畅度不受影响。