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

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.mzph.cn/news/127415.shtml

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

相关文章

进口跨境电商商城源码(海关179接口+海关报关+三单对碰)

海关179接口 现如今&#xff0c;跨境电商正在飞速发展&#xff0c;进口商品成为人们消费的热点。然而&#xff0c;进口商品的报关手续繁琐&#xff0c;而海关179接口的出现解决了这个问题。海关179接口是指与海关电子数据交换的商业接口&#xff0c;可以实现与海关进行数据对接…

【生物信息学】单细胞RNA测序数据分析:计算亲和力矩阵(基于距离、皮尔逊相关系数)及绘制热图(Heatmap)

文章目录 一、实验介绍二、实验环境1. 配置虚拟环境2. 库版本介绍 三、实验内容0. 导入必要的库1. 读取数据集2. 质量控制&#xff08;可选&#xff09;3. 基于距离的亲和力矩阵4. 绘制基因表达的Heatmap5. 基于皮尔逊相关系数的亲和力矩阵6. 代码整合 一、实验介绍 计算亲和力…

【自然语言处理】【长文本处理】RMT:能处理长度超过一百万token的Transformer

相关博客 【自然语言处理】【长文本处理】RMT&#xff1a;能处理长度超过一百万token的Transformer 【自然语言处理】【大模型】MPT模型结构源码解析(单机版) 【自然语言处理】【大模型】ChatGLM-6B模型结构代码解析(单机版) 【自然语言处理】【大模型】BLOOM模型结构源码解析(…

【STL】:list用法详解

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关list的使用&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据结构…

教您如何去除照片上的水印!

许多网友都在寻找方法去除照片上的水印&#xff0c;水印通常用于保护版权或标识来源&#xff0c;但有时候我们可能需要使用带有水印的照片&#xff0c;却又不希望水印影响观感&#xff0c;今天我将向大家介绍两种有效的方法&#xff0c;帮助解决“如何去除照片上的水印”这一难…

metaRTC集成flutter ui demo编译指南

概要 Flutter是由Google开发的开源UI工具包&#xff0c;用于构建跨平台应用程序&#xff0c;支持linux/windows/mac/android/ios等操作系统。 metaRTC新增flutter demo&#xff0c;支持linux/windows/mac/android/ios操作系统&#xff0c;此demo在ubuntu桌面环境下测试成功。…

【嵌入式项目应用】__UART自定义通信协议代码实现方法

目录 前言 一、什么是通信协议 二、简单通信协议的问题 三、通信协议的常见内容 1. 帧头 2. 设备地址/类型 3. 命令/指令 4. 命令类型/功能码 5. 数据长度 6. 数据 7.帧尾 8.校验码 四、通信协议代码实现 1. 消息数据发送 a. 通过串口直接发送每一个字节 b. 通过…

<windows>win11输入法无法设置UI,变为了win10样子,解决方法

1 问题 升级win11版本后&#xff0c;输入法可能会变为旧版&#xff0c;如下图。如何恢复WIN11新版样子&#xff1f; 2 解决 点击开始–>设置–>搜索”语言“–>选择中文简体右侧语言选项。 下拉到最后选择微软拼音右侧三点&#xff0c;选择键盘选项–>选择常规…

【C语言初阶】之函数

【C语言初阶】之函数 1. 函数是什么2. C语言中的函数2.1 库函数2.2.1 利用文档学习库函数 2.2 自定义函数 3. 函数参数3.1 实际参数(实参)3.2 形式参数(形参) 4. 函数调用4.1 传值调用4.2 传址调用4.3 练习 5. 函数的嵌套调用和链式访问5.1 嵌套调用5.2 链式访问 6. 函数的声明…

微服务架构之路1,服务如何拆分?使用微服务的注意事项?

目录 一、前言二、单体服务的弊端三、微服务化四、服务如何拆分&#xff1f;五、使用微服务的注意事项1、服务如何定义2、服务如何发布和订阅3、服务如何监控4、服务如何治理5、故障如何定位 大家好&#xff0c;我是哪吒。 一、前言 微服务已经是Java开发的必备技能&#xff…

Python画图之动态爱心

Python画出动态爱心&#xff08;有趣小游戏&#xff09; 一、效果图二、Python代码 一、效果图 二、Python代码 import random from math import sin, cos, pi, log from tkinter import *CANVAS_WIDTH 640 # 画布的宽 CANVAS_HEIGHT 480 # 画布的高 CANVAS_CENTER_X CANV…

线段树 区间赋值 + 区间加减 + 求区间最值

线段树好题&#xff1a;P1253 扶苏的问题 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 区间赋值 区间加减 求区间最大。 对于区间赋值和区间加减来说&#xff0c;需要两个懒标记&#xff0c;一个表示赋值cover&#xff0c;一个表示加减add。 区间赋值的优先级大于区间加…

大麦协议开发

1. 用户抢购请求处理&#xff1a; - 后端实现&#xff1a;在后端&#xff0c;您可以创建一个用于处理用户抢购请求的接口。当用户发起抢购请求时&#xff0c;后端会根据一定的算法和逻辑来处理请求。例如&#xff0c;可以使用分布式锁来保证只有一个用户能够成功抢购。示例后端…

VS2017制作安装包如何将整个文件夹添加进依赖项中

找到安装项目右键view-文件系统 找到Application Folder 右键Add-Folder 如Python38 选中创建的 Python38 在右侧的空白处粘贴要复制的文件即可。文件多&#xff0c;等待时间较长

玩转硬件之Micro:bit的玩法(三)——计步器

随着技术的发展&#xff0c;现在智能手机和智能手表已经走进千家万户&#xff0c;所以大家对于计步器可能不陌生&#xff0c;计步器是一种用于计算行走步数的装置。它通常是一个小型电子设备&#xff0c;可以佩戴在身体上&#xff0c;如腕带、腰带或口袋中。计步器通过感应人体…

树结构及其算法-二叉查找树

目录 树结构及其算法-二叉查找树 C代码 树结构及其算法-二叉查找树 二叉树在建立的过程中是根据“左子树 < 树根 < 右子树”的原则建立的&#xff0c;因此只需从树根出发比较键值即可&#xff0c;如果比树根大就往右&#xff0c;否则往左而下&#xff0c;直到相等就找…

浅谈安科瑞无线测温产品在南非某变电站的应用

摘要&#xff1a;随着电力工业的发展&#xff0c;对设备的安全性、可靠性要求越来越高。在这种条件下&#xff0c;高压设备的无线测温系统应运而生。这种技术是将内置电池或电流感应和无线发射模块的测温传感器安装于各测温点&#xff0c;由于其体积小&#xff0c;且无需任何接…

WordPress外链页面安全跳转插件

老白博客我参照csdn和腾讯云的外链跳转页面&#xff0c;写了一个WordPress外链安全跳转插件&#xff1a;给网站所有第三方链接添加nofollow标签和重定向功能&#xff0c;提高网站安全性。插件包括两个样式&#xff0c;由于涉及到的css不太一样&#xff0c;所以分别写了两个版本…

矢量图形编辑软件illustrator 2023 mac中文软件特点

illustrator 2023 mac是一款矢量图形编辑软件&#xff0c;用于创建和编辑排版、图标、标志、插图和其他类型的矢量图形。 illustrator 2023 mac软件特点 矢量图形&#xff1a;illustrator创建的图形是矢量图形&#xff0c;可以无限放大而不失真&#xff0c;这与像素图形编辑软…

赋能制造业高质量发展,释放采购数字化新活力——企企通亮相武汉2023国际智能制造创新论坛

摘要 “为应对成本上升、供应端不稳定、供应链上下游协同困难、决策无数据依据等问题&#xff0c;利用数字化手段降本增效、降低潜在风险十分关键。在AI等先进技术发展、供应链协同效应和降本诉求等机遇的驱动下&#xff0c;采购供应链数字化、协同化成为企业激烈竞争的优先选…