Vue 树状结构控件

article/2025/6/10 5:03:54

1、效果图如下所示：

2、网络请求的数据结构如下：

3、新建插件文件：menu-tree.vue，插件代码如下：

<template><div class="root"><div class="parent" @click="onParentClick(parentItem)"><div class="parent-rectangle" :style="{ 'width': i == 1 ? '24px' : '32px' }" v-for="i in currentLevel - 1" :key="i"></div><div class="parent-right"><img class="parent-icon" :src="getParentIconUrl()" @click.stop="changeExpandStatus()"/><div class="parent-title" v-html="parentItem.text"></div></div></div><div class="child" v-if="isShowChildList()"><MenuTree :parentItem="item" v-for="(item, index) in parentItem.children" :currentLevel="currentLevel + 1":key="index" @onMenuTreeItemConfirm="onMenuTreeItemConfirm"></MenuTree></div></div>
</template><script>
export default {components: {MenuTree: () => import('./menu-tree.vue') // 引入自身作为子组件},props: {parentItem: {type: Object,default: {}},currentLevel: {type: Number,default: 1},},mounted() {},data() {return {treeMinUnitIconUrl: require('@/assets/images/icon-file.svg'),treeFoldedIconUrl: require('@/assets/images/icon-to-fold.svg'),treeExpandedIconUrl: require('@/assets/images/icon-to-expand.svg'),}},watch: {},methods: {isShowChildList() {return this.parentItem.expanded;},changeExpandStatus() {console.log("this.parentItem.childQty = " + this.parentItem.childQty);if (this.parentItem.childQty && this.parentItem.childQty > 0) {this.parentItem.expanded = !this.parentItem.expanded;}},getParentIconUrl() {if (this.currentLevel == 1) {return this.treeMinUnitIconUrl;}if (!this.parentItem.childQty || this.parentItem.childQty == 0) {return this.treeMinUnitIconUrl;}return this.parentItem.expanded ? this.treeFoldedIconUrl : this.treeExpandedIconUrl;},onParentClick(item) {if (this.currentLevel > 1) {item.currentLevel = this.currentLevel;}this.$emit("onMenuTreeItemConfirm", item);},onMenuTreeItemConfirm(item) {this.onParentClick(item);},},
}
</script><style scoped>
.root {width: 100%;min-height: 48px;display: flex;flex-direction: column;align-items: center;
}.parent {min-height: 48px;width: 100%;display: flex;flex-direction: row;align-items: center;
}.parent-rectangle {min-height: 48px;
}.parent-right {min-height: 48px;min-width: 140px;display: flex;flex-direction: row;align-items: center;
}.parent-icon {width: 24px;height: 24px;
}.parent-title {width: calc(100% - 24px - 8px);min-height: 16px;text-align: left;line-height: 16px;font-size: 14px;margin-left: 8px;
}.child {width: 100%;display: flex;flex-direction: column;align-items: center;
}
</style>

4、使用方法如下：

<template><div class="root"><van-popup class="popup" v-model="showMenuTreePop" round position="bottom"><div class="popup-title">请选择行政区划</div><div style="height: 60vh; width: 100%; overflow-y: scroll;"><MenuTree :parentItem="rootItem" :currentLevel="1" @onMenuTreeItemConfirm="onMenuTreeItemConfirm"></MenuTree></div><div class="table-bottom"><div class="table-bottom-btn color-green" @click="showMenuTreePop = false">取消</div></div></van-popup></div>
</template><script>
import MenuTree from '@/components/menu-tree.vue';
export default {components: { MenuTree },data() {return {rootItem: {},showMenuTreePop: false,}},methods: {loadMenutreeDataList() {// 通过网络请求获取数据列表 resconsole.log("res = ", res);this.$set(this.rootItem, "children", res);this.$set(this.rootItem, "text", "行政区划");this.$set(this.rootItem, "expanded", true);this.$set(this.rootItem, "childQty", res ? res.length : 0);this.showMenuTreePop = true;// 打开弹窗},onMenuTreeItemConfirm(clickedItem) {// clickedItem 就是点击选中的数据项, 其 currentLevel 属性值就是其所处层级，如果层级是1，则表示点击的是根节点this.showMenuTreePop = false;// 关闭弹窗},}
}
</script><style scoped>
.root {width: 100%;height: 100vh;
}.popup {width: 100%;background: #FFFFFF;border-radius: 16px;
}.table-bottom {width: 100%;height: 71px;display: flex;flex-direction: row;align-items: center;border-top: solid 1px #E8E8E8;
}.table-bottom-btn {min-width: 50px;height: 44px;flex: 1;color: #FFFFFF;font-size: 12px;line-height: 44px;border-radius: 22px;margin-left: 3%;margin-right: 3%;font-family: PingFangSC-Regular;font-weight: 400;text-align: center;
}.color-green {color: #FFFFFF;background-color: #2DA541;
}
</style>

5、插件中使用到的资源文件如下：

1、icon-file.svg<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716600220842" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19100" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M815.104 69.632q27.648 25.6 44.032 42.496t25.088 28.672 10.752 19.968 2.048 14.336l0 16.384-151.552 0q-10.24 0-17.92-7.68t-12.8-17.92-7.68-20.992-2.56-16.896l0-126.976 3.072 0q8.192 0 16.896 2.56t19.968 9.728 28.16 20.48 42.496 35.84zM640 129.024q0 20.48 6.144 42.496t19.456 40.96 33.792 31.232 48.128 12.288l149.504 0 0 577.536q0 29.696-11.776 53.248t-31.232 39.936-43.008 25.6-46.08 9.216l-503.808 0q-19.456 0-42.496-11.264t-43.008-29.696-33.28-41.984-13.312-49.152l0-696.32q0-21.504 9.728-44.544t26.624-42.496 38.4-32.256 45.056-12.8l391.168 0 0 128zM704.512 768q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-384 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l384 0zM768 448.512q0-26.624-18.432-45.568t-45.056-18.944l-384 0q-26.624 0-45.056 18.944t-18.432 45.568 18.432 45.056 45.056 18.432l384 0q26.624 0 45.056-18.432t18.432-45.056z" p-id="19101" fill="#1296db"></path></svg>2、icon-to-expand.svg<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716600138280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5120" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M880 112a32 32 0 0 1 32 32v736a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32V144a32 32 0 0 1 32-32z m-40 72H184v656h656V184zM536 320c4.416 0 8 3.584 8 8V480h152c4.416 0 8 3.584 8 8v48a8 8 0 0 1-8 8H544v152a8 8 0 0 1-8 8h-48a8 8 0 0 1-8-8V544H328A8 8 0 0 1 320 536v-48c0-4.416 3.584-8 8-8H480V328c0-4.416 3.584-8 8-8z" fill="#1296db" fill-opacity=".65" p-id="5121"></path></svg>3、icon-to-fold.svg<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1716600168259" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18002" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M880 112a32 32 0 0 1 32 32v736a32 32 0 0 1-32 32H144a32 32 0 0 1-32-32V144a32 32 0 0 1 32-32z m-40 72H184v656h656V184zM696 480c4.416 0 8 3.584 8 8v48a8 8 0 0 1-8 8h-368A8 8 0 0 1 320 536v-48c0-4.416 3.584-8 8-8z" fill="#1296db" fill-opacity=".65" p-id="18003"></path></svg>


http://www.hkcw.cn/article/LKAiTtUene.shtml

相关文章

【VLAs篇】01：GROOT N1—面向通用人形机器人的开放基础模型

【VLAs篇】01：GROOT N1—面向通用人形机器人的开放基础模型

栏目内容论文标题GROOT N1: 一个面向通用人形机器人的开放基础模型 (GROOT N1: An Open Foundation Model for Generalist Humanoid Robots)作者/机构NVIDIA关键词人形机器人 (Humanoid Robots), 基础模型 (Foundation Model), 视觉-语言-动作模型 (VLA), 双系统架构 (Dual-Sys…
阅读更多...
【摘录】显示屏购买要注意的参数

【摘录】显示屏购买要注意的参数

4K显示器是指具备4K分辨率的显示器设备。4K的名称来源于其横向解析度约为4000像素&#xff0c;分辨率有3840x2160和40962160像素2种超高分辨率规格。相比主流的1080P全高清分辨率&#xff0c;4K显示器增加数百万个像素点&#xff0c;画面的精细程度及显示品质有质的飞跃。 将屏…
阅读更多...
C++语法系列之特殊类设计

C++语法系列之特殊类设计

一、请设计一个类&#xff0c;不能被拷贝 其实就是防止拷贝构造和赋值运算符的重载&#xff0c;这个在C11中讲了&#xff0c;在C98之前可以声明为private&#xff0c;现在直接等于delete就可以了 //C98 class A { public:A(){} private:A(const A& a);A& operator(co…
阅读更多...
网络安全厂商F5推出AI Gateway，化解大模型应用风险

网络安全厂商F5推出AI Gateway，化解大模型应用风险

AI正以前所未见的速度重塑数字化体验。然而&#xff0c;企业在加速落地现代化数字体验的过程中&#xff0c;其在保障和交付AI应用方面仍面临严峻挑战。这些应用需处理海量数据&#xff0c;涉及复杂流量模式&#xff0c;并引入更高级的安全威胁&#xff0c;而企业当前的安全能力…
阅读更多...
调用.net DLL让CANoe自动识别串口号

调用.net DLL让CANoe自动识别串口号

1.前言 CANoe9.0用CAPL控制数控电源_canoe读取程控电源电流值-CSDN博客 之前做CAPL通过串口控制数控电源&#xff0c;存在一个缺点&#xff1a;更换电脑需要改串口号 CSDN上有类似的博客&#xff0c;不过要收费&#xff0c;本文根据VID和PID来自动获取串口号&#xff0c;代码…
阅读更多...
C++中锁与原子操作的区别及取舍策略

C++中锁与原子操作的区别及取舍策略

文章目录 锁与原子操作的基本概念锁&#xff08;Lock&#xff09;原子操作&#xff08;Atomic Operations&#xff09; 锁与原子操作的区别1. **功能**2. **性能**3. **复杂性**4. **适用场景** 锁与原子操作的取舍策略1. **简单变量操作**2. **复杂共享资源**3. **性能敏感场景…
阅读更多...
知识拓展卡———————RSTP与MSTP的简要说明

知识拓展卡———————RSTP与MSTP的简要说明

我们在之前的学习过程中了解了STP&#xff08;生成树协议&#xff09;的各个端口角色选举的相关概念&#xff0c;今天我们再来拓展一下关于STP的扩展性知识点MSTP与RSTP。 目录 RSTP&#xff08;Rapid Spanning Tree Protocol,快速生成树协议&#xff09;: 端口角色&#xf…
阅读更多...
NSSCTF [LitCTF 2025]test_your_nc

NSSCTF [LitCTF 2025]test_your_nc

[复现]绕过学的还是太差了&#xff0c;多积累吧 ​​​​​​题目 题目: 给了一个python文件 #!/bin/python3 import osprint("input your command")blacklist [cat,ls, ,cd,echo,<,${IFS},sh,\\]while True:command input()for i in blacklist:if i in com…
阅读更多...
(10)Fiddler抓包-Fiddler如何设置捕获Firefox浏览器的Https会话

(10)Fiddler抓包-Fiddler如何设置捕获Firefox浏览器的Https会话

1.简介 经过上一篇对Fiddler的配置后&#xff0c;绝大多数的Https的会话&#xff0c;我们可以成功捕获抓取到&#xff0c;但是有些版本的Firefox浏览器仍然是捕获不到其的Https会话&#xff0c;需要我们更进一步的配置才能捕获到会话进行抓包。 2.环境 1.环境是Windows 10版…
阅读更多...
持续领跑中国异地组网路由器市场，贝锐蒲公英再次登顶销量榜首

持续领跑中国异地组网路由器市场，贝锐蒲公英再次登顶销量榜首

作为国产远程连接SaaS服务的创领者&#xff0c;贝锐持续引领行业发展&#xff0c;旗下贝锐蒲公英异地组网路由器&#xff0c;凭借出色的技术实力和市场表现&#xff0c;斩获2024年线上电商平台市场销量份额中国第一的佳绩&#xff0c;充分彰显了其在网络解决方案与异地组网领域…
阅读更多...
Redis底层数据结构之深入理解跳表（2）

Redis底层数据结构之深入理解跳表（2）

上一篇文章中我们详细讲述了跳表的增添、查找和修改的操作&#xff0c;这篇文章我们来讲解一下跳表在多线程并发时的安全问题。在Redis中&#xff0c;除了网络IO部分和大文件的后台复制涉及到多线程外&#xff0c;其余任务执行时全部都是单线程&#xff0c;这也就意味着在Redis…
阅读更多...
振动力学：有阻尼单自由度系统（简谐力激励的受迫振动）

振动力学：有阻尼单自由度系统（简谐力激励的受迫振动）

本文讨论外力作用下的单自由度系统的受迫振动&#xff0c;特别是详细讨论了系统的共振特性。 1. 受迫振动的解及其组成 根据文章1和2的描述&#xff0c;此时简谐力外力 f ( t ) f 0 sin ⁡ ( ω t ) f(t) f_0 \sin(\omega t) f(t)f0​sin(ωt)。因此振动方程为&#xff1a;…
阅读更多...
Vert.x学习笔记-EventLoop与Handler的关系

Vert.x学习笔记-EventLoop与Handler的关系

Vert.x学习笔记 一、底层机制&#xff1a;事件驱动的核心引擎二、协作流程&#xff1a;事件分发与执行三、线程安全&#xff1a;EventLoop与Handler的约束四、性能优化&#xff1a;最佳实践与注意事项五、典型场景与架构设计六、总结 在Vert.x中&#xff0c;**EventLoop&#x…
阅读更多...
DevEco Studio的使用

DevEco Studio的使用

IDE环境的搭建 快速开始 因为本版本的DevEco Studio为一体化版本&#xff0c;已经包含了SDK&#xff0c;构建插件&#xff0c;ohpm等工具&#xff0c;所以您 在安装完成后即可开箱即用&#xff0c;进行工程开发&#xff0c;无需配置环境。首先看一下安装DevEco Studio的相关流…
阅读更多...
手动删除网页上的禁止复制事件

手动删除网页上的禁止复制事件

以Edge浏览器为环境、以网络上一个文档为例。 右击页面&#xff0c;打开【检查】工具。选择元素&#xff0c;打开【事件侦听器】&#xff1a; 展开copy&#xff0c;删除里面的事件&#xff1a; 选中文字&#xff0c;进行复制
阅读更多...
【MATLAB去噪算法】基于CEEMD联合小波阈值去噪算法(第三期)

【MATLAB去噪算法】基于CEEMD联合小波阈值去噪算法(第三期)

02.去噪算法原理 1.引言 传统EMD方法存在模态混叠问题&#xff0c;即信号成分在不同IMF分量中出现碎片化分布。为改进这一问题&#xff0c;Huang等&#xff08;1999&#xff09;提出间歇性测试算法&#xff0c;但效果有限。Wu和Huang&#xff08;2009&#xff09;发展的集合经…
阅读更多...
Semi-Supervised Neuron Segmentation via Reinforced Consistency Learning

Semi-Supervised Neuron Segmentation via Reinforced Consistency Learning

perturbed counterpart x u ′ ^{u} u′ waterz环境不好满足&#xff0c;不建议复现
阅读更多...
R语言使用随机过采样（Random Oversampling）平衡数据集

R语言使用随机过采样（Random Oversampling）平衡数据集

随机过采样&#xff08;Random Oversampling&#xff09;是一种用于平衡数据集的技术&#xff0c;常用于机器学习中处理类别不平衡问题。当某个类别的样本数量远少于其他类别时&#xff08;例如二分类中的正负样本比例悬殊&#xff09;&#xff0c;模型可能会偏向多数类&#x…
阅读更多...
pcie 日常问答-20250528

pcie 日常问答-20250528

问题均来自工作总结&#xff0c;面经问题&#xff1b;多为发散性问题&#xff1b;大多均会结合S IP rtl实现进行细致分析。 1. dllp包有哪些类型&#xff1f;dllp主要功能是干甚呢的&#xff1f; dllp是一个点到点的传输&#xff08;传输过程中没有任何标识&#xff09;&#…
阅读更多...
ADK实战-基于ollama+qwen3实现外部工具串行调用

ADK实战-基于ollama+qwen3实现外部工具串行调用

0 环境准备 1 开发环境准备 1.1 创建项目python环境 1.2 在pycharm创建项目 1.3 安装项目依赖 2 资源准备 3 adk agent构建 3.1 新建adk_agent_tool_serial python包 3.2 编辑__init__.py文件 4 配置env 4.1 新建.env文件 4.2 编辑.env文件 5 agent逻辑实现 5.1 …
阅读更多...
推荐文章

Copyright @ 2022~2023