VUE recursive tree to achieve multi-level list
What is recursion?
Simply put, it is to use the component itself in the component.
Why use recursion?
If there are many drop-down menus, the same level, hierarchical data, and levels are mixed, you can use the nested loop of v-for and it will not be over. Yes, it can be done if there is no problem, but if the data is added with [a lot of] level classification; it can also be achieved by using v-for, but the code may be more complicated or confusing! It is also not suitable for later maintenance. At this time, we can use what we are talking about [recursive components], using recursive components, no matter how your data increases, we don’t need to change our code.
Look at the effect first:
1. Create two files:
parent component tree.vue, child component tree-detail
parent component code:
<template>
<div id="tree">
<treedetail
:title="list.name" //把值传给子组件
:list="list.children" //把值传给子组件
:num='0'
>
</treedetail>
</div>
</template>
<script>
/**
* 模拟一个树形结构图
*/
const list = {
name: "电子产品",
children: [
{
name: "电视",
children: [
{
name: "philips",
children: [
{
name: "philips-A" },
{
name: "philips-B" },
{
name: "philips-C" }
]
},
{
name: "Tcl",
children: [
{
name: "Mac Air" },
{
name: "Mac Pro" },
{
name: "ThinlPad",
children: [
{
name: "ThinlPad-A",
children: [
{
name: "ThinlPad-A-a" },
{
name: "ThinlPad-A-b" },
{
name: "ThinlPad-A-c" }
]
},
{
name: "ThinlPad-B" },
{
name: "ThinlPad-C" },
{
name: "ThinlPad-D" }
]
}
]
},
{
name: "海兴" }
]
},
{
name: "电脑",
children: [{
name: "acer" }, {
name: "联想" }, {
name: "惠普" }]
},
{
name: "可穿戴的设备",
children: [
{
name: "手环",
children: [
{
name: "华为B5手环" },
{
name: "小米手环" },
{
name: "iphone手环" }
]
}
]
}
]
};
import treedetail from '../tree/treedetail'
export default{
name:'tree',
data(){
return{
list}
},
components:{
treedetail} //注册子组件
}
</script>
Sub-component code:
<template>
<div id="treedetail" >
<div class="treedetail" @click="btn()" :style="indent"> //btn是用来切换显示隐藏
<span>{
{
flag ? '-' :'+'}}</span>
<span>{
{
title}}</span> //接收到的标题
</div>
<div v-if="flag"> //这里加显示隐藏也是必要的
<treedetail //treedetail这里的命名要跟父组件注册子组件名称一样，不然无法显示。DIV就无法显示
v-for="(item,index) in list"
:key="index"
:title="item.name"
:list='item.children' //渲染列表下的列表数据
:num='num + 1' //这里的作用应该是分清层级。
></treedetail>
</div>
</div>
</template>
<script>
export default {
name:'treedetail',
props:{
title:{
type:String,
default:'名称'
},
list:{
type:Array},
num:{
type:Number,
default:0
}
},
data(){
return{
flag:false
}
},
methods:{
btn(){
this.flag=!this.flag
}
},
computed:{
indent(){
return `transform: translate(${
this.num*20}px)`;
}
}
}
</script>