树形结构数据展示及返回上一级

最新推荐文章于 2024-07-20 18:16:53 发布

小松鼠敲代码

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量154

点赞数

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_56848461/article/details/134164663

版权

文章描述了一种使用JavaScript和Vue.js实现的前端动态菜单组件，展示了如何通过递归处理数据，实现在点击时展开或收起菜单项，以及回退到上级菜单的功能。

摘要由CSDN通过智能技术生成

11月1日，又是搬砖的一天，让我们红尘作伴，活的潇潇洒洒。。。。。。

html

<template>
	<view class="content">
		<view>
			<input class="sreachTool" v-model="toolValue"/>
			<van-icon name="search" size="15" class="searchIcon"/>	
		</view>
		<view class="disP" v-if="showTop" @click="backTop()">
			<image src="../../static/top.png"></image>
			<view class="borderBottom">上一级</view>
		</view>
	<view class="disP" v-for="(item,index) in data" @click="itemMenu(item,index)">
		<!-- <image src="../../static/img.png"></image> -->
		<van-icon :name="item.icon" size="20"/>
		<view class="borderBottom item" >
			<view>
				<view>{{item.cat_name}}</view>
				<view class="itemName">{{item.cat_pid}}</view>
			</view>
			<view v-if="item.type==1"><image src="../../static/img.png"></image></view>
			<view class="itemTime" v-if="item.type==2">{{item.cat_time}}</view>
		</view>
	</view>
	</view>
</template>

data() {
			return {
				data:[],
//模拟后台数据
				dataJava: [ {
					            "cat_id": 1,
					            "cat_name": "支付",
					            "cat_pid": "张三",
					            "cat_level": 0,
					            "cat_time": "2023-01-02",
								"icon":"comment-o",
								"type":1,
					            "children": [
					                {
					                    "cat_id": 3,
					                    "cat_name": "微信支付",
					                    "cat_pid":"李四",
					                    "cat_level": 1,
					                   "icon":"comment-o",
									   "type":1,
					                }
					            ]
					        },
							 {"cat_id": 2,
							 "cat_name": "后悔期",
							 "cat_pid": "张三",
							 "cat_level": 0,
							 "cat_time": '2023-01-02',
							 "icon":"coupon-o",
							 "type":2,
							 "children": [
							     {
							         "cat_id": 4,
							         "cat_name": "后悔期1",
							         "cat_pid":"李四",
							         "cat_level": 1,
							        "icon":"coupon-o",
									"type":2,
									"children": [
									    {
									        "cat_id": 8,
									        "cat_name": "后悔期1.1",
									        "cat_pid":"李四",
									        "cat_level": 1,
									       "icon":"coupon-o",
											"type":2,
									    }
									   ]
							     },
								 {
								     "cat_id": 8,
								     "cat_name": "后悔期2",
								     "cat_pid":"李四",
								     "cat_level": 1,
								    "icon":"coupon-o",
								 	"type":2,
								 }
							    ]
							 },
							 {"cat_id": 6,
							 "cat_name": "冻结怎么办",
							 "cat_pid": "张三",
							 "cat_level": 0,
							 "cat_time": '2023-01-02',
							 "icon":"coupon-o",
							 "type":2,
							 }],
				showTop:false,
				toolValue:"",
				currentIndex:[],//当前路径数组
			}
		},
		created() {
			this.data=this.dataJava
		},
		methods: {
			itemMenu(item,index){
				if(item.children){
					//展示上一级按钮
					this.showTop=true
					this.data=item.children //当前展开节点
					 this.currentIndex.push(index); // 展开节点时添加索引到当前路径数组
				}else{ 
					this.showMenu=false	
					this.$toast('详情页面')
				}
			},
			backTop(){
				this.currentIndex.pop(); // 收起节点时从当前路径数组移除最后一个索引
				 console.log('pop',this.currentIndex.length)
				 if(this.currentIndex.length==0){
					 this.showTop=false
				 }
				let currentNode = this.dataJava;
				  for (const index of this.currentIndex) {
				    currentNode = currentNode[index];
				    currentNode = currentNode.children; // 获取上一级目录的子节点数据
				  }
				this.data=currentNode
			}
			
		}