ant-design-vue tree 点击父节点展开子节点

在 ant-design-vue 的 `a-tree` 组件中，可以通过配置和事件监听实现点击父节点时展开或折叠子节点的功能。以下是实现该功能的详细说明： ### 点击父节点展开子节点的实现方式 1. **使用 `defaultExpandAll` 属性** 通过设置 `defaultExpandAll="true"`，可以默认展开所有节点[^4]。然而，这仅适用于初始化时的默认状态，并不能动态响应父节点的点击操作。 2. **监听 `onExpand` 事件** 使用 `onExpand` 事件可以捕获用户展开或折叠节点的操作。结合 `treeData` 和 `expandedKeys` 属性，可以动态控制哪些节点被展开或折叠。 3. **实现点击父节点展开子节点** 在 `a-tree` 中，可以通过以下方法实现点击父节点时自动展开或折叠子节点： - 设置 `:expanded-keys="expandedKeys"` 属性来绑定当前展开的节点。 - 在 `@check` 或自定义点击事件中，手动更新 `expandedKeys` 列表。 以下是代码示例： ```vue <template> <div> <a-tree :tree-data="treeData" :expanded-keys="expandedKeys" @expand="onExpand" checkable :replaceFields="{ children: 'children', title: 'name', key: 'id' }" /> </div> </template> <script> export default { data() { return { expandedKeys: [], // 控制展开的节点 treeData: [ { id: '0-0', name: 'Parent Node 1', children: [ { id: '0-0-0', name: 'Child Node 1-1' }, { id: '0-0-1', name: 'Child Node 1-2' }, ], }, { id: '0-1', name: 'Parent Node 2', children: [ { id: '0-1-0', name: 'Child Node 2-1' }, { id: '0-1-1', name: 'Child Node 2-2' }, ], }, ], }; }, methods: { onExpand(expandedKeys) { this.expandedKeys = expandedKeys; // 更新展开的节点 }, }, }; </script> ``` ### 动态控制父节点点击行为 如果需要在点击父节点时自动展开或折叠子节点，可以监听 `@check` 或 `@select` 事件，并根据选中的节点动态调整 `expandedKeys`。 ```vue <template> <div> <a-tree :tree-data="treeData" :expanded-keys="expandedKeys" @check="onCheck" checkable :replaceFields="{ children: 'children', title: 'name', key: 'id' }" /> </div> </template> <script> export default { data() { return { expandedKeys: [], treeData: [ { id: '0-0', name: 'Parent Node 1', children: [ { id: '0-0-0', name: 'Child Node 1-1' }, { id: '0-0-1', name: 'Child Node 1-2' }, ], }, { id: '0-1', name: 'Parent Node 2', children: [ { id: '0-1-0', name: 'Child Node 2-1' }, { id: '0-1-1', name: 'Child Node 2-2' }, ], }, ], }; }, methods: { onCheck(checkedKeys) { const parentKey = checkedKeys.checked ? checkedKeys.node.key : null; if (parentKey) { this.expandedKeys = [...this.expandedKeys, parentKey]; // 添加父节点到展开列表 } else { this.expandedKeys = this.expandedKeys.filter(key => key !== parentKey); // 移除父节点 } }, }, }; </script> ``` ### 注意事项 - 如果需要支持动态数据加载，可以在 `onExpand` 方法中触发异步请求以加载子节点数据[^4]。 - 默认情况下，`a-tree` 的展开与勾选是独立的。若希望勾选父节点时自动勾选子节点，需额外实现递归逻辑[^1]。