VUE:侧边弹出栏组件,组件中有树状图,搜索框可筛选树状图节点,可收缩

news2024/11/18 13:58:27

作者:CSDN @ _乐多_

本文记录了一个侧边弹出栏组件代码。代码即插即用。

弹出栏中有树状图,搜索框,可收缩。

其中,搜索框可筛选树状图节点。点击右侧小按钮可以收缩弹出框,点击X号也可以收缩弹出框。

请添加图片描述


文章目录

      • 一、组件代码


代码依赖element-plus库。且需要下载几个svg图标。

一、组件代码

<template>

  <div class="donate-content-div" :class

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

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

相关文章

CNVD-2021-26422:亿邮电子邮件系统moni_detail.do远程命令执行漏洞复现 [附POC]

文章目录 亿邮电子邮件系统 moni_detail.do 远程命令执行 CNVD-2021-26422漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 0x06 修复建议 亿邮电子邮件系统 moni_detail.do 远程命令执行 CNVD-2021-26422漏洞复…

TSINGSEE智慧港口可视化智能监管解决方案,助力港口码头高效监管

一、方案背景 全球经济一体化进程以及国际市场的不断融合&#xff0c;使得港口码头成为了大型货运周转中心&#xff0c;每天数以百计的大型货轮、数以千计的大型集装箱、数以万计的人员流动。港口作为货物、集装箱堆放及中转机构&#xff0c;具有昼夜不歇、天气多变、环境恶劣…

基于内存的分布式NoSQL数据库Redis(三)常用命令

文章目录 知识点07&#xff1a;String类型的常用命令知识点08&#xff1a;Hash类型的常用命令知识点09&#xff1a;List类型的常用命令知识点10&#xff1a;Set类型的常用命令知识点11&#xff1a;Zset类型的常用命令知识点12&#xff1a;BitMap类型的常用命令知识点13&#xf…

PMP考完后应该考什么?

PMP&#xff08;项目管理专业&#xff09;认证是全球范围内最受认可和尊重的项目管理资格证书之一。通过PMP考试的人已经展示了他们在项目管理领域的知识和技能。然而&#xff0c;项目管理是一个不断发展和变化的领域&#xff0c;持续学习和进一步提升自己的能力是非常重要的。…

【web前端】web前端设计入门到实战第一弹——html基础精华

前端 一&#xff1a;图片属性二&#xff1a;音频标签三&#xff1a; 视频标签四&#xff1a;链接标签五&#xff1a;列表标签5.1.无序列表5.2.有序列表3.自定义列表 六&#xff1a;表格6.1合并单元格 七&#xff1a;input标签八&#xff1a;select系列九&#xff1a; 文本域标签…

开发工具分享 - Mybatis SQL日志格式化H5

目录 一、 序言二、代码示例三、部署至Nginx 一、 序言 平时通过IDEA开发&#xff0c;可以直接装相关MybatisLogFormat的插件直接对控制台里的Mybatis SQL日志进行格式化。一旦离开本地环境&#xff0c;到了测试或者线上&#xff0c;就得自己手动拼参数了。 简单的SQL还好&am…

文件夹怎么隐藏?电脑重要文件夹隐藏的方法

对于存放了重要数据的文件夹来说&#xff0c;最关键的就是保护文件夹的数据安全&#xff0c;而隐藏就是常见的文件夹保护方法之一。那么&#xff0c;电脑重要文件夹该怎么隐藏呢&#xff1f;下面我们就一起来了解一下。 文件夹属性隐藏 在Windows系统中&#xff0c;提供了隐藏…

再见Jenkins!你好,GitLink引擎,更强大的自动化部署工具!

文章目录 写在前面一、准备工作1.1 注册GitLink账号1.2 托管项目1.3 新建项目管理引擎流水线 二、开始构建流水线2.1 进入图形流水线编辑页2.2 添加git clone节点2.3 添加shell节点2.4 添加allure html节点2.5 添加新建GitLink疑修节点2.6 添加钉钉通知节点2.7 设置任务触发器2…

网站如何才能不被黑,如何做好网络安全

当企业网站受到攻击时&#xff0c;首页文件可能被篡改&#xff0c;百度快照也可能被劫持并重定向到其他网站。首要任务是加强网站的安全防护。然而&#xff0c;许多企业缺乏建立完善的网站安全防护体系的知识。因此&#xff0c;需要专业的网站安全公司来提供相应的保护措施。今…

jquery.i18n.properties.js使用及seo优化

使用方法 具体使用方法可以参考jquery.i18n.properties的使用讲解与实例 这篇博客&#xff0c;这里仅简单示例 1、下载 jquery.i18n.properties.js文件&#xff0c;地址&#xff1a; jquery.i18n.properties.js 2、设创建语言properties文件&#xff0c;如&#xff1a;strings…

vue2-org-tree 树型结构的使用

vue2-org-tree 用于创建和显示组织结构树状图&#xff0c;帮助开发者轻松地可视化组织结构&#xff0c;例如公司的层级、部门之间的关系、团队成员等。其主要功能有&#xff1a;自定义节点、可折叠节点、支持拖放、搜索、导航等功能。 这里我们主要使用 vue2-org-tree 进行多次…

苹果平板可以用别的电容笔吗?电容笔和Apple pencil区别

和苹果原装的Pencil相比&#xff0c;这种平替的电容笔并没具备重力压感&#xff0c;只有一种倾斜的压感功能。如果你不经常用来作画&#xff0c;一支普通的电容笔就足够了。不管是用来记笔记&#xff0c;还是用来解决一些数学问题&#xff0c;都能用得上。再说了&#xff0c;即…

ui设计师简历自我评价的范文(合集)

ui设计师简历自我评价的范文篇一 本人毕业于艺术设计专业&#xff0c;具有较高的艺术素养&#xff0c;平时注重设计理论知识的积累&#xff0c;并将理论应用到作品中。了解当下设计的流行趋势&#xff0c;设计注重细节、重视用户体验&#xff0c;对色彩搭配有着浓厚的兴趣&…

Python学习之逻辑中的循环有哪些?

1. for循环 for 循环用于迭代 (遍历)一个序列&#xff0c;例如列表、元组、字符串或字典中的元素。 通常使用 for 循环来遍历可迭代对象中的元素&#xff0c;并对每个元素执行相同的操作。 示例: for item in iterable: # 执行操作2.while循环 -while循环用于在满足某个条件…

新能源车企们在“金九银十”的热潮里改了“策略”?

9月&#xff0c;各大新能源车企销量拉锯战落下帷幕&#xff0c;比亚迪稳坐冠军之位&#xff0c;9月累计销量达286903辆&#xff0c;环比增长18.8%&#xff1b;特斯拉仍旧位列第二&#xff0c;9月销量74073辆&#xff0c;环比增长14.5%&#xff1b;吉利汽车“超车”广汽埃安霸榜…

idea热加载,JRebel 插件是目前最好用的热加载插件,它支持 IDEA Ultimate 旗舰版、Community 社区版

1.如何安装 ① 点击 https://plugins.jetbrains.com/plugin/4441-jrebel-and-xrebel/versions 地址&#xff0c;下载 2022.4.1 版本。如下图所示&#xff1a; ② 打开 [Preference -> Plugins] 菜单&#xff0c;点击「Install Plugin from Disk…」按钮&#xff0c;选择刚下…

哈希(开放寻址法)代码模板

//开放寻址法 //数组长度一般要开到题目数据范围的2~3倍 #include<iostream> #include<cstring> using namespace std; //null代表无穷大 //最大和最小 //0x3f3f3f3f 1061109567&#xff0c;0xc0c0c0c0 -1061109568 const int N 2e5 3, null 0x3f3f3f3f;//取质…

需要影视解说配音的看过来,用它就对了

近年来&#xff0c;随着影视、动画等领域的快速发展&#xff0c;声音设计和配音成为了影片制作中不可或缺的一环。然而&#xff0c;并非每个人都拥有天赋般的配音技巧。面对这一困境&#xff0c;幸运的是&#xff0c;现在市面上有很多简单免费好用的配音软件&#xff0c;今天就…

gcc编译器和gdb调试工具

gcc编译器 GCC&#xff08;GNU Compiler Collection&#xff09;是一套由GNU计划开发的自由软件编译器集合&#xff0c;它支持多种编程语言&#xff0c;包括C、C、Objective-C、Fortran、Ada和Go等。GCC 是一个功能强大、稳定可靠的编译器&#xff0c;被广泛应用于各种操作系统…

【KOS】安装卸载软件

环境 系统&#xff1a;银河麒麟&#xff08;KOS&#xff09;V10&#xff08;SP1&#xff09;2303 问题 银河麒麟&#xff08;KylinOS&#xff09;原是在“863计划”和国家核高基科技重大专项支持下&#xff0c;国防科技大学研发的操作系统&#xff0c; 后由国防科技大学将品牌…