在做我的项目中,会遇到一些树形的数据结构,罕用在左侧菜单导航,或者评论援用等中央,这种数据结构有个特点是不晓得它会嵌套多少层,所以用 template 去展现这样的数据时就有点辣手,这篇文章梳理两种展现这种数据结构的办法。
文章中用到的数据是上面这个:
mainData: {
value: "root",
children:[{
value: "层级 1 -1",
children:[{
value: "层级 2 -1",
children:[{
value: "层级 3 -1",
children:[]}]
},{
value: "层级 2 -2",
children:[]}]
},{
value: "层级 1 -2",
children:[]}]
}
也就是上面这个样子。
组件递归调用
第一种是组件递归调用本人的形式,创立一个组件,该组件在援用本人去展现 children 的数据,子组件如下:
<template>
<div>
<div class="demo">
{{treeData.value}}
<tree-comp v-for="(item, index) in treeData.children" :treeData="item"></tree-comp>
</div>
</div>
</template>
<script>
export default {
name: 'treeComp',
props:{
treeData: {default: function(){return {}
}
}
},
mounted(){},
methods:{}}
</script>
<style lang="less" scoped>
.demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
&:before{content:'--';display: inline-block;padding:0 4px;}
}
</style>
而后创立父组件,父组件应用子组件,并将数据传入子组件。
<template>
<tree-comp :treeData="mainData"></tree-comp>
</template>
<script>
export default {
name: 'treeMain',
data () {
return {
mainData: {
value: "root",
children:[
{
value: "层级 1 -1",
children:[{
value: "层级 2 -1",
children:[{
value: "层级 3 -1",
children:[]}]
},{
value: "层级 2 -2",
children:[]}]
},{
value: "层级 1 -2",
children:[]}
]
}
}
},
components:{"tree-comp": () => import('./TreeComp')
},
mounted(){},
methods:{}}
</script>
对于递归组件的内容,在官网文档里是有提到的 –> 递归组件
应用 render 办法
除了应用组件的形式,也能够应用 vue 的 render 办法,去利用 JavaScript 的齐全编程的能力,实现递归解决树形数据,从而展现出有限层级树。如下:
<template>
<tree-comp :treeData="mainData"></tree-comp>
</template>
<script>
export default {
name: 'treeRender',
data () {
return {
mainData: {
value: "root",
children:[
{
value: "层级 1 -1",
children:[{
value: "层级 2 -1",
children:[{
value: "层级 3 -1",
children:[]}]
},{
value: "层级 2 -2",
children:[]}]
},{
value: "层级 1 -2",
children:[]}
]
}
}
},
components:{
treeComp:{
functional: true,
props: {treeData: Object},
render(h, {props: {treeData = {}}}) {const creatNode = (node)=>{if(node.children && node.children.length > 0){
let hArr = node.children.map(item=>{return creatNode(item)
})
return h('div', {class:'demo'}, [node.value, hArr])
}else{return h('div', {class:'demo'}, [node.value])
}
}
return creatNode(treeData)
},
}
},
mounted(){},
methods:{}}
</script>
<style lang="less" scoped>
.demo{padding:5px 0;margin:1px 10px;text-align: left;font-size:16px;max-width:500px;border-left:1px dashed #999;
&:before{content:'--';display: inline-block;padding:0 4px;}
}
</style>
其中最外围的就是在 render 办法里,creatNode 办法用递归的形式,深度优先遍历树状数据,生成 vnode,而后渲染出了页面。