一般用来渲染一个树，当树拥有子节点时，以保证其能够正常展开。
形如如下所示
首先伪造一下数据
export default [
{
title: "test1",
children: [
{
title: "test1-1"
},
{
title: "test1-2"
}
]
},
{
title: "test2"
},
{
title: "test3",
children: [
{
title: "test3-1"
},
{
title: "test3-2",
children: [
{
title: "test3-2-1"
},
{
title: "test3-2-2"
}
]
}
]
}
];
数据看起来比较有规律，每个节点都包含一个title，其拥有子节点的话，就有一个children属性，而且是一个数组，里面包含其子节点的信息，子节点的格式和父节点的格式是一致的。
发现其规律，那么，使用递归来实现渲染。
<template>
<li>
<span @click="toggle">
{{items.title}}
</span>
<ul v-show="canOpen" v-if="hasChild">
<tree-menu v-for="(item, index) in items.children" :key="index" :items="item"></tree-menu>
</ul>
</li>
</template>
<script>
export default {
name: "treeMenu",
props: ["items"],
data() {
return {
canOpen: false
};
},
computed: {
hasChild() {
return this.items.children && this.items.children.length;
}
},
methods: {
toggle() {
if (this.hasChild) {
this.canOpen = !this.canOpen;
}
}
}
};
</script>
在进行组件递归时，name属性是必不可少的，以保证其可以引用当前的组件。
然后再在外部引入这个TreeMenu组件
<template>
<div id="app">
<ul v-for="(item, index) in items" :key="index">
<tree-menu :items="item"></tree-menu>
</ul>
</div>
</template>
<script>
import treeData from "./components/data";
import TreeMenu from "./views/TreeMenu";
export default {
components: { TreeMenu },
data() {
return {
items: treeData
};
}
};
</script>
大功告成。
如果觉得我的文章对您有用，请您随意打赏。您的支持将鼓励我更加努力创作！
如无特殊声明，文章均为原创，若有不正之处，万望告知。转载请附上原文地址，十分感谢！
说点什么