vue3中antd tree组件使用expandedKeys进行展开后所有节点不能操作展开或收起
时间: 2024-03-24 18:41:25 浏览: 207
vue.js 实现点击展开收起动画效果
您好!针对您的问题,可能是由于您在使用`expandedKeys`属性时没有正确处理每个节点的`expanded`状态。具体来说,您需要在每个节点上添加一个`expanded`属性,并在`onSelect`事件中更新该属性的值,同时根据该属性的值来确定节点的展开状态。具体实现可以参考以下代码:
```
<template>
<a-tree :treeData="treeData" :expandedKeys="expandedKeys" @select="onSelect"></a-tree>
</template>
<script>
import { ref } from 'vue';
import { Tree } from 'ant-design-vue';
export default {
components: {
'a-tree': Tree
},
setup() {
const treeData = ref([
{
title: 'Node1',
key: '1',
expanded: false,
children: [
{
title: 'Child Node1',
key: '1-1',
expanded: false,
isLeaf: true
},
{
title: 'Child Node2',
key: '1-2',
expanded: false,
isLeaf: true
}
]
},
{
title: 'Node2',
key: '2',
expanded: false,
children: [
{
title: 'Child Node3',
key: '2-1',
expanded: false,
isLeaf: true
},
{
title: 'Child Node4',
key: '2-2',
expanded: false,
isLeaf: true
}
]
}
]);
const expandedKeys = ref([]);
const onSelect = (selectedKeys, info) => {
const { node } = info;
if (!node.isLeaf) {
node.expanded = !node.expanded;
expandedKeys.value = treeData.value
.filter((n) => n.expanded)
.map((n) => n.key);
}
};
return {
treeData,
expandedKeys,
onSelect
};
}
};
</script>
```
在上面的代码中,我们为每个节点添加了一个`expanded`属性,并在`onSelect`事件中更新了该属性的值。同时,我们通过`treeData`数组中的节点来确定当前展开的节点,然后将它们的`key`添加到`expandedKeys`数组中,以便于antd tree组件正确显示每个节点的展开状态。
阅读全文