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

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;可以实现与海关进行数据对接…

Centos7上安装 Node.js

文章目录 一、前言二、步骤三、涉及nodejs&#xff0c;centos还是少用吧 一、前言 centos7安装nodejs如果直接安装较高版本会包错误&#xff0c;无法运行npm node: /lib64/libm.so.6: version GLIBC_2.27‘ not found (required by node)二、步骤 网上说的下载升级编译器的方…

PyTorch入门学习(十一):神经网络-线性层及其他层介绍

一、简介 神经网络是由多个层组成的&#xff0c;每一层都包含了一组权重和一个激活函数。每层的作用是将输入数据进行变换&#xff0c;从而最终生成输出。线性层是神经网络中的基本层之一&#xff0c;它执行的操作是线性变换&#xff0c;通常表示为&#xff1a; y Wx b其中…

PM2 vs Kubernetes:在部署 Node.js 服务时使用哪个?

Node.js 已成为 Web 开发中的热门技术之一&#xff0c;但如果我们想成功地将 Node.js 应用程序交付给用户&#xff0c;我们需要考虑部署和管理这些应用程序。两个常见的选项是 PM2 和 Kubernetes。PM2 是一个用于运行和管理 Node.js 应用程序的进程管理器&#xff0c;它能够创建…

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

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

一键全自动剪辑,喝杯咖啡的时间,几百个视频就剪好了,效率大大提高,可以让我有更多的时间去研究剪辑的思路

一键全自动剪辑&#xff1a;提升效率&#xff0c;释放创造力 在当今的快节奏数字时代&#xff0c;视频剪辑已经成为各行各业不可或缺的一部分。从社交媒体到电子商务&#xff0c;从教育到娱乐&#xff0c;视频剪辑的应用越来越广泛。然而&#xff0c;剪辑工作往往需要大量的时…

【Mybatis源码】注册器 - TypeAliasRegistry

Mybatis中使用TypeAliasRegistry注册器用于管理类型与别名,Mybatis中许多功能的实现都需要从TypeAliasRegistry注册器中找到别名对应的类型,本篇我们介绍一下TypeAliasRegistry注册器的原理与使用 一、构造方法 TypeAliasRegistry注册器类提供了一个无参数的构造方法用于创…

【自然语言处理】【长文本处理】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. 通过…

图像处理:图片二值化学习,以及代码中如何实现

目录 1、了解下图片二值化的含义 2、进行图像二值化处理的方法 3、如何选择合适的阈值进行二值化 4、实现图片二值化&#xff08;代码&#xff09; &#xff08;1&#xff09;是使用C和OpenCV库实现&#xff1a; &#xff08;2&#xff09;纯C代码实现&#xff0c;不要借…

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

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

Unity从入门到主程学习路线(内含学习资料)干货超全

写在最前 很多小伙伴想进阶Unity主程&#xff0c;进阶Unity架构师&#xff0c;不知道要学哪些知识&#xff0c;今天给大家分享一下比较完整的知识体系&#xff0c;Unity学习路线&#xff0c;介绍一些有干货的博主与教程,给大家做参考。 不管你是已经工作了&#xff0c;还是正…

Ubuntu:使用apache2部署Vue开发的网站

作者:CSDN @ _乐多_ 本文记录了Vue项目打包到部署到ubuntu系统的全部步骤。 文章目录 一、代码打包二、安装 Apache2三、开启/关闭apache23.1 开启3.2 关闭四、部署Vue应用到Apache24.1 首次部署4.2 更新部署五、全部操作截图一、代码打包 首先,确保您已经在本地开发环境中…

【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。 区间赋值的优先级大于区间加…