el-tree-select 实现选择父节点取消子节点，选择子节点取消父节点

### 关于 `el-tree-select` 组件实现父子节点互斥选择 在 Vue 的 Element Plus 中，`el-tree-select` 是一种常见的组件用于展示树形结构的选择框。要实现父节点与子节点之间的互斥选择功能，可以通过监听事件以及自定义逻辑来完成。 #### 解决方案概述 为了实现父子节点的互斥选择，可以利用 `@check-change` 或者 `node-click` 事件，在这些事件中编写逻辑以控制其他节点的状态变化。具体来说： - 使用 `check-strictly` 属性设置为 `true` 来解除父子节点间的联动关系[^1]。 - 利用 `@check-change` 方法捕获节点状态的变化，并动态调整兄弟节点或其他层次节点的选中状态。 - 配合 `setCheckedKeys` 和 `getCheckedNodes` 方法操作已选中的节点集合。 以下是具体的代码示例和说明： --- ### 示例代码 ```vue <template> <el-tree-select v-model="selectedValue" :data="treeData" check-strictly @check-change="handleCheckChange" node-key="id" ref="treeSelectRef" /> </template> <script> import { ref } from 'vue'; export default { setup() { const treeSelectRef = ref(null); const selectedValue = ref([]); const treeData = [ { id: 1, label: 'Parent Node', children: [ { id: 2, label: 'Child Node 1' }, { id: 3, label: 'Child Node 2' } ] } ]; /** * 处理节点选中/取消选中的逻辑 */ function handleCheckChange(node, checked) { if (checked) { // 如果当前节点被选中，则移除其同级节点和其他层级冲突节点 unselectConflictingNodes(treeSelectRef.value.getCheckedNodes(), node.id); } else { // 取消选中时不需额外处理 } } /** * 移除与其他节点冲突的选中项 */ function unselectConflictingNodes(checkedNodes, currentId) { const conflictingIds = checkedNodes .filter(n => n.id !== currentId && isConflictNode(n, currentId)) .map(n => n.id); if (conflictingIds.length > 0) { treeSelectRef.value.setCheckedKeys([currentId]); // 设置仅保留当前节点 } } /** * 判断两个节点是否存在冲突 */ function isConflictNode(nodeA, nodeIdB) { return ( nodeA.children?.some(child => child.id === nodeIdB) || nodeA.parent?.id === nodeIdB || nodeA.id === nodeIdB ); } return { treeData, selectedValue, handleCheckChange, treeSelectRef }; } }; </script> ``` --- #### 重要参数解释 1. **`check-strictly=true`**: 此属性允许单独选中某个节点而不影响它的父节点或子节点[^1]。 2. **`@check-change`**: 当某节点的勾选状态发生变化时触发此方法，传入三个参数分别为 `(node, checked, indeterminate)` 表示当前节点对象、是否被选中以及是否有部分选中状态。 3. **`ref="treeSelectRef"`**: 获取组件实例以便调用内部 API 如 `setCheckedKeys` 和 `getCheckedNodes`。 --- #### 功能扩展建议 如果需要进一步增强用户体验或者满足更复杂的业务需求，还可以考虑以下改进措施： - 添加提示信息告知用户为何某些选项不可再选。 - 支持异步加载数据并实时更新可选范围。 - 对性能优化进行关注，尤其是当树的数据量较大时应减少不必要的 DOM 操作。