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

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>

js

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=truethis.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}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/157075.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gRPC之grpcui界面工具

1、grpcui界面工具 简单的说&#xff0c;就是gRPC中的postman&#xff0c;grpcui官方地址&#xff1a;https://github.com/fullstorydev/grpcui。 1.1 安装 go get -u github.com/fullstorydev/grpcui go install github.com/fullstorydev/grpcui/cmd/grpcuiv1.2.0[rootzsx …

React Hooks的使用

目录 1.React Hooks使用注意事项 1.useState Hook&#xff1a; 2.useEffect Hook&#xff1a; 3.其他常用Hooks&#xff1a; 2.使用React Hooks需要遵循 1.安装React&#xff1a; 2.导入所需的Hooks&#xff1a; 3.使用Hooks创建组件&#xff1a; 4.在应用中使用组件&…

Redis入门指南学习笔记(1):初识Redis

一.什么是Redis? Redis全称为Remote Dictionary Server&#xff0c;即远程字典服务器&#xff0c;它采用字典结构来存储数据&#xff0c;并允许其他应用通过TCP协议来访问数据。 字典在众多开发语言中都很常见&#xff0c;其形式为键值对&#xff0c;根据键可以获取相应的值…

CHS零壹视频恢复程序监控版/海康版/大华版深入扫描功能演示

安防文件系统是一种嵌入式文件系统&#xff0c;一般情况下监控版程序扫描会基于文件系统进行扫描&#xff0c;如果想更深入的扫描一些数据建议开启深入扫描功能&#xff0c;具体方法如下: 适用版本:监控版/海康版/大华版/专业版/高级版 作用&#xff1a;舍弃嵌入式文件系统直…

利用两个栈s1,s2模拟一个队列时,如何用栈的运算来实现该队列的运算?写出模拟队列插入和删除的函数。一个栈s1用于插入元素,另一个栈s2用于删除元素

利用两个栈s1&#xff0c;s2模拟一个队列时&#xff0c;如何用栈的运算来实现该队列的运算&#xff1f;写出模拟队列插入和删除的函数。一个栈s1用于插入元素&#xff0c;另一个栈s2用于删除元素。 前置知识点&#xff08;栈定义&#xff0c;及出栈入栈函数&#xff09; #def…

GORM:在Go中轻松管理数据库

GORM综合介绍 - Go对象关系映射库 在现代软件开发中&#xff0c;高效的数据库管理对于构建强大的应用程序至关重要。GORM是Go开发人员寻求与数据库进行交互的简化方式的宝贵工具。GORM是Go对象关系映射的缩写&#xff0c;它为Go的面向对象世界与数据库的关系世界之间提供了桥梁…

2.2 - 网络协议 - IP协议,IP地址划分,报文格式,数据分片,抓包实战

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;对网络安全感兴趣的小伙伴可以关注专栏《网络安全入门到精通》 IP协议 1、IP地址划分2、IP协议报文格式3、IP协议数…

设计模式(22)享元模式

一、介绍&#xff1a; 1、定义&#xff1a;享元模式&#xff08;Flyweight Pattern&#xff09;主要用于减少创建对象的数量&#xff0c;以减少内存占用和提高性能。这种类型的设计模式属于结构型模式&#xff0c;它提供了减少对象数量从而改善应用所需的对象结构的方式。 2、…

Windows下多Chrome谷歌浏览器版本共存

场景 某些年代久远的 WEB 应用&#xff0c;必须在指定的浏览器或版本才能正常运行&#x1f602;&#xff0c;此时就需要多个版本 chrome 浏览器共存。 解决方案 下载指定版本 可以从 https://www.chromedownloads.net/ 下载需要的版本&#xff0c;此处下载的是87.0.4280.14…

【Servlet】 一

本文主要介绍了如何在tomcat部署一个webapp 以及 如何借助maven用servlet编写一个hello world . 一.Tomcat Tomcat是一个Java里广泛使用的http服务器 HTTP服务器有很多实现&#xff0c;其中最知名的是Nginx&#xff1b;而在Java里&#xff0c;最知名的是Tomcat 一个Tomcat服务…

快速入手maven

文章目录 Maven介绍Maven安装和配置基于IDEA的Maven工程创建梳理Maven工程GAVP属性Idea构建Maven JavaSE工程Idea构建Maven JavaEE工程1. 手动创建2. 插件方式创建 Maven工程项目结构说明Maven核心功能依赖和构建管理依赖传递和冲突依赖导入失败场景和解决方案扩展构建管理和插…

HDFS架构介绍

数新网络_让每个人享受数据的价值浙江数新网络有限公司是一家开源开放、专注于云数据智能操作系统和数据价值流通的服务商。公司自主研发的DataCyber云数据智能操作系统&#xff0c;主要包括数据平台CyberData、人工智能平台CyberAI、数据智能引擎CyberEngine、数据安全平台Cyb…