vue给树上的每一个结点添加一个clickFlag并且判断是否为最子的结点是设为true否则设置为false
可以通过递归遍历树的每一个节点,在遍历的过程中给每个节点添加clickFlag属性,并判断是否为最子节点。
假设树的数据结构如下:
{
name: "Node1",
children: [
{
name: "Node2",
children: [
{
name: "Node3",
children: []
}
]
},
{
name: "Node4",
children: []
}
]
}
在Vue组件中,可以使用递归的方式来遍历树的节点,并添加clickFlag属性和判断是否为最子节点。
<template>
<div>
<div v-for="node in treeData" :key="node.name">
<span @click="handleClick(node)">{{ node.name }}</span>
<div v-if="node.children && node.children.length > 0">
<ChildNodes :childNodes="node.children" />
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
treeData: {
name: "Node1",
children: [
{
name: "Node2",
children: [
{
name: "Node3",
children: []
}
]
},
{
name: "Node4",
children: []
}
]
}
};
},
methods: {
handleClick(node) {
console.log(node.name + " clicked");
}
}
};
</script>
在上面的代码中,我们使用了一个递归组件ChildNodes来遍历子节点。在递归组件中,我们也需要判断节点是否为最子节点,并设置对应的clickFlag属性。
<template>
<div>
<div v-for="node in childNodes" :key="node.name">
<span @click="handleClick(node)">{{ node.name }}</span>
<div v-if="node.children && node.children.length > 0">
<ChildNodes :childNodes="node.children" />
</div>
</div>
</div>
</template>
<script>
export default {
props: {
childNodes: {
type: Array,
required: true
}
},
methods: {
handleClick(node) {
console.log(node.name + " clicked");
}
},
created() {
this.childNodes.forEach(node => {
if (node.children && node.children.length > 0) {
node.clickFlag = false;
} else {
node.clickFlag = true;
}
});
}
};
</script>
在递归组件的created钩子函数中,我们遍历了子节点,并根据是否有children属性和是否有子节点来设置clickFlag属性。
这样,每个节点都会有一个clickFlag属性,用来表示是否为最子节点
原文地址: http://www.cveoy.top/t/topic/iX87 著作权归作者所有。请勿转载和采集!