在实际生活中经常会遇到树状列表，这里我们试着自己动手实现一个Tree树形组件模型。
实现主要思想主要是对Vue组件使用递归，判断节点是否包含子节点，若包含则对组件进行递归。
详细代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<tree :data="list1"></tree>
<tree :data="list2" :keys="keys"></tree>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script>
Vue.component("tree", {
props: {
data: {
type: Array,
required: true
},
keys: {
type: Object,
default() {
return {
label: 'label',
children: 'children'
}
}
}
},
data() {
return {
mylist: this.data.map(r => {
return {
label: r[this.keys.label],
children: r[this.keys.children],
isShow: false
}
})
}
},
template: `
<ul>
<li v-for="item in mylist" style="margin:10px;list-style:none">
<i v-if="item.children&&item.children.length" class="fa" :class="item.isShow?'fa-angle-down':'fa-angle-right'" aria-hidden="true"></i>
<span @click="item.isShow=!item.isShow">{{ item.label }}</span>
<tree :keys="keys" style="padding-left:30px" v-show="item.isShow" v-if="item.children&&item.children.length" :data="item.children"></tree>
</li>
</ul>
})
new Vue({
el: "#app",
data() {
return {
keys: {
label: 'name',
children: 'cc'
},
list1: [
{
label: "AAA",
children: [
{
label: "AAA-1",
children: [
{
label: "BBB-1-1",
children: []
}, {
label: "BBB-1-2",
children: []
},
]
},
{
label: "BBB-1",
children: []
},
]
},
{
label: "BBB",
children: [
{
label: "AAA-1",
children: []
}
]
},
{
label: "CCC",
children: []
},
]
}
},
methods: {},
})
</script>
