vue递归组件实现树形结构

递归组件实现树形结构"/>

vue递归组件实现树形结构

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>

效果图：