vue递归组件实现树形结构
更新时间：2022年09月01日 10:50:37 作者：依古比古*
这篇文章主要为大家详细介绍了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>效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文详细讲解了Vuex和其使用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了使用Vant如何完成各种Toast提示框，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了.vue 组件打包成 .js的操作方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要介绍了vue指令中的v-once用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
本文主要介绍了Vue+Cesium快速搭建的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-08-08
uni-app 使用编辑器创建vue3 项目并且运行的操作方法
这篇文章主要介绍了uni-app 使用编辑器创建vue3 项目并且运行的操作方法,目前uniapp 创建的vue3支持 vue3.0 -- 3.2版本 也就是说setup语法糖也是支持的，需要的朋友可以参考下2023-01-01
Element通过v-for循环渲染的form表单校验的实现
日常业务开发中，form表单校验是一个很常见的问题，本文主要介绍了Element通过v-for循环渲染的form表单校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
解决ant-design-vue中menu菜单无法默认展开的问题
这篇文章主要介绍了解决ant-design-vue中menu菜单无法默认展开的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue使用video插件vue-video-player的示例
这篇文章主要介绍了vue使用video插件vue-video-player的示例，帮助大家更好的理解和使用vue插件，感兴趣的朋友可以了解下2020-10-10
这篇文章主要介绍了vite/Vuecli配置proxy代理解决跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-12-12
最新评论