现实使用中会遇到类似文件树,菜单导航等的情况,需要用递归的方式展示树形结构的数据,就需要使用递归的组件去实现。
一、递归实现树形展示列表
普通的二级树可以用遍历的方式展示,如下代码所示:
<template>
<div class="treeList">
<div class="list-item" v-for="(item, index) in list" :key="index">
<div class="item-name">
<span>{{item.name}}</span>
</div>
<div v-if="item.children" class="children-item">
<div v-for="(child, index) in item.children" :key="index">
<div class="item-name">
<span>{{child.name}}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'treeList',
data () {
return {
list: [{
name: "1",
children: [{
name: "1-1"
}, {
name: "1-2"
}]
}, {
name: "2",
children: [{
name: "2-1"
}, {
name: "2-2"
}]
}]
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.treeList{
text-align: left;
.children-item {
padding-left: 30px;
}
.list-item{
color: #666666;
}
}
</style>
展示结果如下:
如果是多级树的话,可以用递归组件的方式实现,递归组件代码如下,其中List组件为组件本身。
<template>
<div class="treeList">
<div class="list-item" v-for="(item, index) in list" :key="index">
<div class="item-name">
<span>{{item.name}}</span>
</div>
<div v-if="item.children" class="children-item">
<list :list="item.children"></list>
</div>
</div>
</div>
</template>
<script>
export default {
name: "List",
props: {
list: Array
}
};
</script>
<style lang="scss" scoped>
.treeList{
text-align: left;
.children-item {
padding-left: 30px;
}
.list-item{
color: #666666;
}
}
</style>
使用多级树组件的方式如下:
<template>
<div class="treeList">
<list :list="list"></list>
</div>
</template>
<script>
import List from "./components/List";
export default {
name: "Parent",
components: { List },
data() {
return {
list: [{
name: "1",
children: [{
name: "1-1",
children: [
{
name: "1-1-1"
},
{
name: "1-1-2"
}
]
},{
name: "1-2",
children: [
{
name: "1-2-1"
},
{
name: "1-2-2"
}]
}]
}]
}
}
}
</script>
<style lang="scss" scoped>
.treeList{
text-align: left;
.children-item {
padding-left: 30px;
}
.list-item{
color: #666666;
}
}
</style>
展示结果如下展示:
更多的应用递归组件实现功能还有菜单,如ant design和element-ui的菜单组件,github地址https://github.com/xiaoaiai/vue-sass-test/blob/main/src/views/layout/subMenuTemplate.vue中有相关的ant design vue中的menu组件的个人封装组件,大家可以参考一下。
github地址为:https://github.com/xiaoaiai/vue-sass-test/tree/main/src/views/basicTree