vue遞歸組件實現樹形結構
一：遞歸組件
什麼是遞歸組件？簡單來說就是在組件中內使用組件本身。函數自己調用自己。很多情況下我們呢刷數據的時候，不知道到底這個數據結構是有多少層，那麼這個時候我們就用到了遞歸來實現。
二：先用for來遍歷：
父組件中：
<template>
<div class="home">
<tree :title="list.name" :list="list.children"></tree>
</div>
</template>
<script>
import tree from '../components/tree'
export default {
name: "Home",
components: {
tree
},
data: function() {
return {
list: {
name: "酒店",
children: [
{
name: "經濟",
children: [
{
name: "如家",
children: [
{
name: "長江路-如家"
},
{
name: "望江路-如家"
}
]
},
{
name: "7天",
children: [
{
name: "長江路-7天"
},
{
name: "望江路-7天"
}
]
}
]
},
{
name: "舒適",
children: [
{
name: "智選假日",
children: [
{
name: "臥龍路-智選假日"
},
{
name: "望江路-智選假日"
}
]
},
{
name: "全季",
children: [
{
name: "臥龍路-全季"
},
{
name: "建設路-全季"
}
]
}
]
},
{
name: "商務",
children: [
{
name: "中方商務",
children: [
{
name: "臥龍路-中方商務"
},
{
name: "望江路-中方商務"
}
]
},
{
name: "錦江之星",
children: [
{
name: "人民路-錦江之星"
},
{
name: "新華路-錦江之星"
}
]
}
]
}
]
}
};
},
methods: {}
};
</script>
<style scoped>
.ww {
margin-left: 20px;
}
.hh {
font-size: 10px;
}
</style>
子組件中：
<!-- -->
<template>
<div>
<!-- 第一層循環 循環酒店-->
<div v-for="(item,index) in list " :key="index">
<h3>{{item.name}}</h3>
<!-- <! 第二層循環酒店的類型-->
<div v-for="(item,index) in item.children" :key="index">
<h5>{{item.name}}</h5>
<!-- 第三層循環酒店的名稱 -->
<div v-for="(item,index) in item.children" :key="index" class="ww">
<h6>{{item.name}}</h6>
<!-- 第四層循環酒店的具體介紹 -->
<div v-for="(item,index) in item.children" :key="index" class="hh">{{item.name}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "tree",
components: {},
data: function() {
return {
};
},
props:{
title:
{
type: String,
default:"標題"
},
list:{
type:Array,
}
}
};
</script>
<style scoped>
/* @import url(); 引入css類 */
</style>
效果圖如下：
三：遞歸來實現？
通過組件自身的 name名字來實現組件自身的遞歸調用 .
父組件中：
<template>
<div class="home">
<tree :title="list.name" :list="list.children" :detph="0"></tree>
</div>
</template>
<script>
import tree from '../components/tree'
export default {
name: "Home",
components: {
tree
},
data: function() {
return {
list: {
name: "酒店",
children: [
{
name: "經濟",
children: [
{
name: "如家",
children: [
{
name: "長江路-如家"
},
{
name: "望江路-如家"
}
]
},
{
name: "7天",
children: [
{
name: "長江路-7天"
},
{
name: "望江路-7天"
}
]
}
]
},
{
name: "舒適",
children: [
{
name: "智選假日",
children: [
{
name: "臥龍路-智選假日"
},
{
name: "望江路-智選假日"
}
]
},
{
name: "全季",
children: [
{
name: "臥龍路-全季"
},
{
name: "建設路-全季"
}
]
}
]
},
{
name: "商務",
children: [
{
name: "中方商務",
children: [
{
name: "臥龍路-中方商務"
},
{
name: "望江路-中方商務"
}
]
},
{
name: "錦江之星",
children: [
{
name: "人民路-錦江之星"
},
{
name: "新華路-錦江之星"
}
]
}
]
}
]
}
};
},
methods: {}
};
</script>
<style scoped>
.ww {
margin-left: 20px;
}
.hh {
font-size: 10px;
}
</style>
子組件：
<!-- -->
<template>
<div>
<div :style="getDetph">
<!-- 顯示隱藏 -->
<div @click="getData ">
<!-- 這裏呢如果爲真的話就顯示那麼就是減號否則的話就是加號 -->
<span >{{isShow?'-':'+'}}</span>{{title}}</div>
<!-- 那麼在這裏我們就需要改成 item.name和item.children -->
<div v-if="isShow">
<tree
:title="item.name"
:list="item.children"
v-for="(item,index) in list"
:key="index"
:detph="detph+1"
>
<!-- 每次遞增1 -->
</tree>
</div>
</div>
</div>
</template>
<script>
export default {
name: "tree",
components: {},
data: function() {
return {
isShow: false
};
},
props: {
// 接收標題
title: {
type: String
// default: "標題"
},
// 接收一整個數組
list: {
type: Array
},
// 用來接收層數
detph: {
type: Number
}
},
// 計算屬性用來接收我們的層數
computed: {
getDetph() {
return `transform:translate(${this.detph * 20}px)`;
}
},
methods: {
getData: function() {
this.isShow = !this.isShow;
}
}
};
</script>
<style scoped>
/* @import url(); 引入css類 */
</style>
效果圖：
