uni app 树状结构数据展示

树状数据展示,可以点击item 将点击数据给父组件  ,满足自己需求。不喜勿喷,很简单可以根据自己需求改哈,不要问,点赞收藏就好

<template><view><view v-for="(node, index) in treeData" :key="node.id"><view v-if="!node.ishow"><view v-if="uselast"><view v-if="node.children.length > 0"><view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name_ef"@tap.stop.prevent="item_click" :data-set="node" :id="index"><view><text v-if="node.children":style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text>{{ node.name }}</view><text style="margin-left: 32rpx;color:#f00" v-if="node.children&&node.children.length > 0"@tap.stop.prevent="open_item(index)">{{image[node.isopen?0:1]}}</text></view></view><view v-else><view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name"@tap.stop.preventclick="item_click" :data-set="node" :id="index"><view><text v-if="node.children":style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text>{{ node.name}}</view><text style="margin-left: 32rpx;color:#f00" v-if="node.children&&node.children.length > 0"@tap.stop.prevent="open_item(index)">{{image[node.isopen?0:1]}}</text></view></view></view><view v-else><view :style="'margin-left:'+(zjflag*30+32)+'rpx;'" class="item_name" @tap.stop.prevent="item_click":data-set="node" :id="index"><view><text v-if="node.children":style="'color:'+colors[zjflag]+';margin-right:10rpx'">{{title[zjflag]}}</text>{{ node.name }}</view><text style="margin-left: 32rpx; color:#f00" v-if="node.children&&node.children.length > 0"@tap.stop.prevent="open_item(index)">{{image[node.isopen?0:1]}}</text></view></view></view><view v-if="node.isopen"><tree-node v-if="node.children && node.children.length > 0" :tree-data="node.children"@callBack="mycallback" :uselast="uselast" :zjflag="zjflag+1" /></view></view></view>
</template><script>import TreeNode from './TreeNode.vue';export default {components: {TreeNode},name: 'TreeNode',props: {treeData: {type: Array,required: true,},uselast: {type: Boolean,default: false},callback: {type: String,default: ''},showkey: {type: String,default: ''},zjflag: {type: Number,default: 0}},data() {return {title: ["①", "②", "③", "④", "⑤", "⑥", "⑦", "⑧", "⑨", "⑩"],// image: ["🔺", "🔻"]image: ["关", "开"],colors: ['#ff0', '#f00', '#00f', '#0ff', '#f0f', '#0f0'],}},methods: {item_click: function(e) {// console.log("item_click", JSON.stringify(item.currentTarget.dataset.set))let id = e.currentTarget.idlet item = e.currentTarget.dataset.setif (this.uselast) {if (item.children.length == 0) {this.$emit('callBack', {mydetail: item});} else {this.treeData[id].isopen = !this.treeData[id].isopen}} else {this.$emit('callBack', {mydetail: item});}// if (item.isopen) {// 	this.treeData[id].isopen = false// } else {// 	this.treeData[id].isopen = true// }this.$forceUpdate()},open_item: function(id) {this.treeData[id].isopen = !this.treeData[id].isopenthis.$forceUpdate()},mycallback: function(item) {this.$emit('callBack', {mydetail: item});}},};
</script><style lang="scss" scoped>@function tovmin($rpx) {//$rpx为需要转换的字号@return #{$rpx * 100 / 750}vmin;}.item_name {display: flex;justify-content: space-between;font-size: 28;padding-top: 5rpx;padding-bottom: 5rpx;flex: 1;min-height: tovmin(80);align-items: center;text-align: left;margin-right: tovmin(64);color: #333;font-weight: 600;overflow-y: auto;overflow-x: scroll;border-bottom: solid #efefef 2rpx;white-space: normal;word-break: break-all;word-wrap: break-word;}.item_name_ef {font-size: 28;padding-top: 5rpx;padding-bottom: 5rpx;flex: 1;min-height: tovmin(80);display: flex;align-items: center;justify-content: left;text-align: left;margin-right: tovmin(32);color: #999;font-weight: 600;overflow-y: auto;overflow-x: scroll;border-bottom: solid #efefef 2rpx;white-space: normal;word-break: break-all;word-wrap: break-word;}
</style>

讲一下 

        treeData 树状数据

        uselast  只能使用末级

        showkey  列表要展示的字段

        zjflag        树状结构第几层默认0开始

使用  在父组件

引用组件

import TreeNode from './TreeNode.vue';

components: {
            
            TreeNode
        },

    <tree-node :tree-data="treeData" uselast="true" @callBack="tree_node_back"></tree-node>

treeData: [{
                        id: 1,
                        name: '节点1',
                        ishow: false,
                        isopen: true,
                        children: [{
                                id: 2,
                                name: '子1-节点1',
                                ishow: false,
                                isopen: true,
                                children: []
                            },
                            {
                                id: 3,
                                name: '子2-节点1',
                                ishow: false,
                                isopen: true,
                                children: [{
                                    id: 4,
                                    name: '孙1-子2-节点1',
                                    ishow: false,
                                    isopen: true,
                                    children: []
                                }]
                            },
                        ],
                    },
                    {
                        id: 5,
                        name: '节点2',
                        ishow: false,
                        isopen: true,
                        children: [{
                                id: 6,
                                name: '子1-节点2',
                                ishow: false,
                                isopen: true,
                                children: [{
                                    id: 8,
                                    name: '孙1-子1-节点2',
                                    ishow: false,
                                    isopen: true,
                                    children: [{
                                        id: 8,
                                        name: '重1-孙1-子1-节点2',
                                        ishow: false,
                                        isopen: true,
                                        children: [{
                                            id: 9,
                                            name: '曾1-重1-孙1-子1-节点2',
                                            ishow: false,
                                            isopen: true,
                                            children: [{
                                                id: 9,
                                                name: '僧1-曾1-重1-孙1-子1-节点2',
                                                ishow: false,
                                                isopen: true,
                                                children: []
                                            }]
                                        }]
                                    }]
                                }]
                            },
                            {
                                id: 7,
                                name: '子2-节点2',
                                ishow: false,
                                isopen: true,
                                children: [{
                                    id: 8,
                                    name: '孙1-子2-节点2',
                                    ishow: false,
                                    isopen: true,
                                    children: [{
                                        id: 8,
                                        name: '重1-孙1-子2-节点2',
                                        ishow: false,
                                        isopen: true,
                                        children: [{
                                            id: 9,
                                            name: '曾1-重1-孙1-子2-节点2',
                                            ishow: false,
                                            isopen: true,
                                            children: [{
                                                id: 9,
                                                name: '僧1-曾1-重1-孙1-子2-节点2',
                                                ishow: false,
                                                isopen: true,
                                                children: []
                                            }]
                                        }]
                                    }]
                                }]
                            },
                        ],
                    },

                ],

    tree_node_back: function(e) {
                if (e.mydetail) {
                    this.tree_node_back(e.mydetail)

                } else {
                    console.log("tree_node_back=222==", JSON.stringify(e))
                }

            },

注意  treedata 中  isshow 是翻着的 false 展示  true 隐藏  isopen 是正常  false 关闭  true 展开

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

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

相关文章

Mellanoxnvidia ib高速网络常用命令总结

1.spci&#xff1a;检查本地的pci设备。示例&#xff1a;lspci| grep -i mell 2.ofed_info&#xff1a;检测ofed驱动版本。示例&#xff1a;ofed_info-s 3.ibstat&#xff1a;查看本机的ib网卡状态。 4.mst&#xff1a;mellnoax软件管理工具。用来生成IB设备描述符。提供给其他…

网络新增接入交换机引发故障应对经验

网管对某一栋楼的汇聚交换机进行配置变更&#xff0c;要增加一台接入交换机&#xff0c;因为人员变多了&#xff0c;终端也就变多了&#xff0c;所以现有的网络和接入设备不能满足需求&#xff0c;需要新增一台接入层的交换机。 现网中新增一台接入交换机&#xff0c;这个配置是…

[Day 15] 區塊鏈與人工智能的聯動應用:理論、技術與實踐

區塊鏈的數字身份認證 1. 概述 數字身份認證是當今數字世界中的關鍵問題之一。傳統的身份驗證方法面臨著安全性、隱私性和可信度等方面的挑戰。區塊鏈技術通過其去中心化、不可篡改和可追溯的特性&#xff0c;為解決這些問題提供了新的可能性。本文將深入探討區塊鏈在數字身份…

经典游戏案例:unity官方推荐3d跑酷

学习目标&#xff1a;实现跑酷核心算法 游戏画面 项目结构目录 部分核心代码 using System; using System.Collections; using System.Collections.Generic; using UnityEngine; /// <summary> /// 游戏管理器是一个状态机&#xff0c;根据当前的游戏状态&#xff0c;它…

cJSON解析数组

json串: {"list":[ "hello","world"]} 代码 : int func(char *sn) { int ret = 0; cJSON *root, *list; FILE *fp = fopen("a.txt", "r"); if(!fp) { printf("open sn file failed!\n"); …

图解Attention学习笔记

教程是来自https://github.com/datawhalechina/learn-nlp-with-transformers/blob/main/docs/ 图解Attention Attention出现的原因是&#xff1a;基于循环神经网络&#xff08;RNN&#xff09;一类的seq2seq模型&#xff0c;在处理长文本时遇到了挑战&#xff0c;而对长文本中…

华北水利水电大学-C程序设计作业

目录 基础题 1-1 分析 代码实现 1-2 分析 代码实现 1-3 分析 代码实现 1-4 ​编辑 分析 代码实现 1-5 分析 代码实现 1-6 分析 代码实现 基础题 1-1 从键盘输入10个学生的有关数据&#xff0c;然后把它们转存到磁盘文件上去。其中学生信息包括学号、姓名…

Redis变慢了?

Redis变慢了&#xff1f; 什么是Redis&#xff1f;测定Redis变慢&#xff1f;最大响应延迟平均响应延迟设置Redis慢日志 分析Redis变慢bigkeysbigkey的危害bigkey优化 写在最后 什么是Redis&#xff1f; 作为一个技术人员来说&#xff0c;大家用的最多的可能就是Redis了&#…

EMQX集群搭建

1. 什么是 MQTT&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级、基于发布-订阅模式的消息传输协议&#xff0c;适用于资源受限的设备和低带宽、高延迟或不稳定的网络环境。它在物联网应用中广受欢迎&#xff0c;能够实现传感器、…

防火墙中的NAT

防火墙的NAT NAT分类 源NAT 基于源IP地址进行转换。 我们之前接触过的静态NAT&#xff0c;动态NAT&#xff0c;NAPT都属于源NAT&#xff0c;都是针对源IP地址进行转换的。源NAT主要目的是为了保证内网用户可以访问公网。 先执行安全策略&#xff0c;后执行NAT 目标NAT 基于…

【数学】什么是最大似然估计?如何求解最大似然估计

背景 最大似然估计&#xff08;Maximum Likelihood Estimation, MLE&#xff09;是一种估计统计模型参数的方法。它在众多统计学领域中被广泛使用&#xff0c;比如回归分析、时间序列分析、机器学习和经济学。其核心思想是&#xff1a;给定一个观测数据集&#xff0c;找到一组…

git的分支管理

✨前言✨ &#x1f4d8; 博客主页&#xff1a;to Keep博客主页 &#x1f646;欢迎关注&#xff0c;&#x1f44d;点赞&#xff0c;&#x1f4dd;留言评论 ⏳首发时间&#xff1a;20246月19日 &#x1f4e8; 博主码云地址&#xff1a;博主码云地址 &#x1f4d5;参考书籍&#x…

【TB作品】MSP430G2553,单片机,口袋板, 单相交流电压、电流计设计

题5 单相交流电压、电流计设计 设计基于MSP430的单相工频交流电参数检测仪。交流有效值0-220V&#xff0c;电流有效值0-40A。电压、电流值经电压、电流传感器输出有效值为0-5V的交流信号&#xff0c;传感器输出的电压、电流信号与被测电压、电流同相位。 基本要求如下 &#xf…

Linux实时查看Java接口数据

1.Linux实时查看Java接口数据的方法 在Linux系统中实时查看Java接口数据通常涉及几个步骤&#xff1a; &#xff08;1&#xff09;编写Java应用程序&#xff1a;首先&#xff0c;你需要有一个Java应用程序&#xff0c;它暴露了一个或多个HTTP接口。这些接口应该返回你想要实时…

php百度云账户余额查询API示例

1、官方文档地址&#xff1a;账户余额查询 请求结构 POST /v{version}/finance/cash/balance HTTP/1.1 Host: billing.baidubce.com ContentType: application/json; charsetutf-8 Content-Length: <Content_Length> Authorization: authorization string 请求头域 …

ubuntu安装本地版overleaf并配置Docker

安装Docker 参考https://blog.csdn.net/2201_76100073/article/details/137025119 更新软件包 sudo apt update sudo apt upgradedocker依赖 sudo apt-get install ca-certificates curl gnupg lsb-release添加docker密钥 curl -fsSL http://mirrors.aliyun.com/docker-ce…

05、部署 YUM 仓库及NFS 共享服务

目录 5.1 部署YUM软件仓库 5.1.1 准备网络安装源&#xff08;服务器端&#xff09; 1、准备软件仓库目录 2、安装并启用vsftpd服务 5.1.2 配置软件仓库位置&#xff08;客户端&#xff09; 5.2 使用yum工具管理软件包 5.2.1 查询软件包 1、yum list——查询软件包列表 …

Python 3 函数

Python 3 函数 函数是Python编程语言的核心组成部分&#xff0c;它们允许我们封装代码块&#xff0c;使其可重用&#xff0c;模块化&#xff0c;并易于维护。在Python 3中&#xff0c;函数的使用和定义都有一些特定的语法和规则。本文将详细介绍Python 3中的函数&#xff0c;包…

DGit的使用

将Remix连接到远程Git仓库 1.指定克隆的分支和深度 2.清理&#xff0c;如果您不在工作区上工作&#xff0c;请将其删除或推送至 GitHub 或 IPFS 以确保安全。 为了进行推送和拉取&#xff0c;你需要一个 PAT — 个人访问令牌 当使用 dGIT 插件在 GitHub 上推送、拉取、访问私…

网关助力边缘物联网

网关助力边缘物联网 在探讨网关如何助力边缘物联网&#xff08;IoT&#xff09;的议题时&#xff0c;我们不得不深入分析这一技术交汇点的复杂性与潜力。边缘计算与物联网的融合&#xff0c;通过将数据处理与分析能力推向网络边缘&#xff0c;即数据生成的地方&#xff0c;极大…