el-tree 点击子节点获取父节点ID

在 `el-tree` 组件中，默认情况下勾选子节点时，其父节点也可能被自动勾选（根据递归选择规则）。如果需要实现 **只勾选子节点而不影响父节点** 的功能，可以借助以下配置及事件处理： --- ### 实现步骤 #### 1. 设置属性 `check-strictly` 通过设置树组件的 `check-strictly` 属性为 `true`，可以让父子节点之间的关联取消。此时勾选某个子节点不会触发对父节点的选择。 ```vue <el-tree :data="treeData" show-checkbox node-key="id" check-strictly /> ``` > **注意**：启用 `check-strictly` 后，树的状态完全由用户控制，不会再有默认的级联效果。 --- #### 2. 使用事件监听优化体验 如果你希望保留某些特定逻辑，比如动态判断是否允许勾选某节点，则可以在 `@check-change` 或其他相关事件中自定义逻辑。例如过滤掉不需要的数据。 示例代码如下： ```javascript methods: { handleCheckChange(data, checked) { // data 表示当前改变状态的节点信息；checked 是否被选中 if (checked && this.isParentNode(data)) { // 判断是否为父节点并限制操作 console.log('禁止勾选父节点'); return; } console.log(`节点 ${data.label} 被${checked ? '勾选' : '取消'}了`); }, isParentNode(node) { // 自定义条件检测该节点是不是“不可选”的父节点 return Boolean(node.children?.length); } } ``` 模板部分绑定此函数: ```html <el-tree ref="treeRef" :data="treeData" show-checkbox @check-change="handleCheckChange" /> ``` --- #### 3. 获取最终结果 调用 `getCheckedNodes()` 方法获取所有已勾选的叶子节点数据，并忽略父节点项。 ```javascript const selectedLeaves = this.$refs.treeRef.getCheckedNodes(false, true); // 第二个参数设为 true 只返回叶节点 console.log(selectedLeaves); ``` --- 以上即是如何让 Element UI 中的 Tree 树形控件支持单独勾选孩子节点而无需同步调整父母结点的相关说明啦！

### 使用 `el-cascader` 实现选中子节点并获取父节点数据 在使用 Element Plus 提供的 `el-cascader` 组件时，可以通过监听其变化事件以及配置选项来实现选中子节点的同时获取对应的父节点数据。以下是具体的实现方式： #### 方法概述 通过设置 `props.checkStrictly = true` 可以允许用户选择任意级别的节点[^5]。然而，默认情况下点击文字不会触发选中操作，因此需要额外处理这一行为。此外，在回调函数中可以解析路径数组以提取父节点的相关信息。 --- #### 示例代码 ```html <template> <div> <!-- Cascader 组件 --> <el-cascader v-model="selectedValue" :options="treeData" :props="cascaderProps" @change="handleCascaderChange" clearable > </el-cascader> <!-- 显示结果 --> <p>选中的值: {{ selectedValue }}</p> <p>父节点 ID 列表: {{ parentIds }}</p> </div> </template> <script> export default { data() { return { // 当前选中的值 selectedValue: [], // 父节点ID列表 parentIds: [], // 树形结构数据 treeData: [ { value: "1", label: "一级 1", children: [ { value: "1-1", label: "二级 1-1", children: [{ value: "1-1-1", label: "三级 1-1-1" }], }, ], }, { value: "2", label: "一级 2", children: [ { value: "2-1", label: "二级 2-1" }, { value: "2-2", label: "二级 2-2" }, ], }, ], // Cascader 配置项 cascaderProps: { checkStrictly: true, // 允许选择任意级别 emitPath: false, // 不返回完整的路径，仅返回最后一级 value: "value", // 值字段名称 label: "label", // 文本字段名称 children: "children",// 子节点字段名称 }, }; }, methods: { handleCascaderChange(value) { const pathNodes = this.getPathByValue(this.treeData, value); if (!pathNodes || !Array.isArray(pathNodes)) return; // 提取父节点 IDs this.parentIds = pathNodes.map((node) => node.value).slice(0, -1); // 排除最后一个子节点 }, /** * 根据值查找路径上的所有节点 */ getPathByValue(tree, targetValue) { let result = null; function traverse(nodes) { for (const node of nodes) { if (node.value === targetValue) { result = [node]; return; } if (node.children && Array.isArray(node.children)) { const childResult = []; traverse(node.children, childResult); if (childResult.length > 0) { result = [node].concat(childResult); return; } } } } traverse(tree); return result; }, }, }; </script> ``` --- #### 关键点说明 1. **启用严格模式 (`checkStrictly`)** 启用此参数后，用户可以选择任意级别的节点而不局限于叶子节点。 2. **自定义点击逻辑** 默认情况下，只有左侧的选择框支持交互，如果希望点击文字也能完成选中操作，则需要扩展功能。上述例子并未涉及这部分需求，但如果需要可进一步封装组件或重写默认行为。 3. **解析路径** 在 `@change` 回调中传入的是最终选定的值（通常是叶节点）。为了得到整个路径上的其他祖先节点的信息，可通过递归遍历整棵树找到匹配的目标及其上级关系[^3]。 4. **动态更新状态** 将计算得出的父节点集合存储至响应式变量以便实时展示给前端使用者查看效果。 --- ###