树形控件存在父类展开,在展开新的父类其他父类收起
时间: 2024-02-28 15:53:30 浏览: 78
对于树形控件中的父子节点的展开和收起,可以通过维护一个 `expanded` 数组来进行控制。在这个数组中,记录了所有已经展开的节点的 `id` 或 `key`,然后在渲染树形结构时,根据当前节点的 `id` 或 `key` 是否在 `expanded` 数组中来判断当前节点是否已经展开。
当展开一个父节点时,可以先将 `expanded` 数组中的所有非当前节点的父节点都设置为收起状态,然后再将当前节点设置为展开状态。这样可以保证同一级别的其他父节点都是收起状态。
下面是一个基于 Vue 的树形控件的示例代码:
```html
<template>
<div>
<el-tree :data="treeData" :props="treeProps" :node-key="nodeKey" @node-click="handleNodeClick"></el-tree>
</div>
</template>
<script>
export default {
data() {
return {
treeData: [
{
id: 1,
label: '父节点1',
children: [
{
id: 11,
label: '子节点1-1'
},
{
id: 12,
label: '子节点1-2'
}
]
},
{
id: 2,
label: '父节点2',
children: [
{
id: 21,
label: '子节点2-1'
},
{
id: 22,
label: '子节点2-2'
}
]
}
],
expanded: []
};
},
computed: {
treeProps() {
return {
label: 'label',
children: 'children',
isLeaf: node => !node.children || node.children.length === 0,
expanded: node => this.expanded.includes(node.id)
};
},
nodeKey() {
return 'id';
}
},
methods: {
handleNodeClick(node) {
if (!node.children || node.children.length === 0) {
// 叶子节点不需要处理
return;
}
if (this.expanded.includes(node.id)) {
// 当前节点已经展开,收起它及其所有子孙节点
this.expanded = this.expanded.filter(id => id !== node.id && !id.startsWith(`${node.id}-`));
} else {
// 当前节点未展开,将其所有父节点都设置为收起状态,然后展开当前节点
this.expanded = [node.id];
let parent = node.parent;
while (parent) {
this.expanded.push(parent.id);
parent = parent.parent;
}
}
}
}
};
</script>
```
在这个示例代码中,`treeData` 数组表示树形结构的数据,`expanded` 数组表示已经展开的节点的 `id`,`treeProps` 对象用来设置树形控件的属性,其中 `expanded` 属性的值为一个函数,用来判断当前节点是否已经展开。`nodeKey` 属性用来设置节点的唯一标识符,可以是节点的 `id` 或其他属性。
在点击节点时,`handleNodeClick` 方法会根据当前节点的展开状态,来进行展开或收起操作。如果当前节点已经展开,则将其及其所有子孙节点都收起;如果当前节点未展开,则将其所有父节点都收起,然后展开当前节点。这样就可以保证同一级别的其他父节点都是收起状态。