Element中树形控件在项目中的实际应用
文章目录
- 1、使用目的
- 2、官网组件
- 3、组合使用组件案例
- 4、在项目中实际应用
- 4.1 组合组件的使用
- 4.1.2 代码落地
- 4.1.3 后台接口数据
- 4.1.4 实际效果
官网连接直达:Tree树形控件的使用
1、使用目的
用清晰的层级结构展示信息,可展开或折叠。
2、官网组件

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree><script>export default {data() {return {data: [{label: '一级 1',children: [{label: '二级 1-1',children: [{label: '三级 1-1-1'}]}]}, {label: '一级 2',children: [{label: '二级 2-1',children: [{label: '三级 2-1-1'}]}, {label: '二级 2-2',children: [{label: '三级 2-2-1'}]}]}, {label: '一级 3',children: [{label: '二级 3-1',children: [{label: '三级 3-1-1'}]}, {label: '二级 3-2',children: [{label: '三级 3-2-1'}]}]}],defaultProps: {children: 'children',label: 'label'}};},methods: {handleNodeClick(data) {console.log(data);}}};
</script>
3、组合使用组件案例
官网提供的不同类型的树形结构,里边的属性可以自己组合来满足自己的实际要求。可以根据参数的描述来进行使用设置。

4、在项目中实际应用
- 1、使用基础的树形结构
- 2、自定义节点内容,节点后添加操作【不同的层级对应不容的操作,实现是通过节后台接口返回的节点属性值】
- 3、优化节点点击展开的方式
- 4、实现属性结构的选择框,方便后续操作
expand-on-click-node :是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点。
4.1 组合组件的使用
4.1.2 代码落地
<el-treeshow-checkbox:data="menus":props="defaultProps":expand-on-click-node="false"node-key="catId"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><el-buttonv-if="node.level <= 2"type="text"size="mini"@click="() => append(data)">Append</el-button><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree>
4.1.3 后台接口数据
树形结构的数据来自后台接口。后台要对数据进行组合后返回给前台。

4.1.4 实际效果

相关文章:
Element中树形控件在项目中的实际应用
文章目录1、使用目的2、官网组件3、组合使用组件案例4、在项目中实际应用4.1 组合组件的使用4.1.2 代码落地4.1.3 后台接口数据4.1.4 实际效果官网连接直达:Tree树形控件的使用 1、使用目的 用清晰的层级结构展示信息,可展开或折叠。 2、官网组件 <…...
kaggle RSNA 比赛过程总结
引言 算算时间,有差不多两年多没在打kaggle了,自20年最后一场后(其实之前也就打过两场,一场打铁,一场表格赛是金是银不太记得,当时相当于刺激战场,过拟合lb大赛太刺激了,各种trick只…...
51单片机入门————LED灯的控制
LED的电路图通过原理图看出,LED灯是接单片机芯片的P20~P27的一共有8个LED,51单片机也是8字节的P20x010xFE————1111 1110P20xFE可以表示把在P2端的第一个灯点亮1 表示高电平0表示低电平当为0的时候形成一个完整回路,电流从高电平流向低电平…...
J - 二进制与、平方和(线段树 + 维护区间1的个数)
2023河南省赛组队训练赛(二) - Virtual Judge (vjudge.net) 请你维护一个长度为 n 的非负整数序列 a1, a2, ..., an,支持以下两种操作: 第一种操作会将序列 al, al 1, ..., ar 中的每个元素,修改为各自和 x…...
BertTokenizer的使用方法(超详细)
导入 from transformers import BertTokenizer from pytorch_pretrained import BertTokenizer以上两行代码都可以导入BerBertTokenizer,transformers是当下比较成熟的库,pytorch_pretrained是google提供的源码(功能不如transformers全面) 加载 tokenizer BertT…...
深度学习编译器CINN(3):编译过程中遇到的问题总结
目录 问题一:No module named XXXX 问题描述 分析与解决方案 问题二:catastrophic error: cannot open source file "float16.h"...
yum 安装mysql8数据全过程
mysql8安装方式:(使用官方yum仓库) 1. wget https://dev.mysql.com/get/mysql80-community-release-el7-4.noarch.rpm 安装 yum install mysql80-community-release-el7-4.noarch.rpm 2、生成yum源缓存 每次当我们编写了,…...
内网vCenter部署教程一
PS:因为交换机链路为trunk,安装先登录ESXI,将端口组改为管理vlan ID(1021) 一、双击镜像,打开文件夹,目录为F:\vcsa-ui-installer\win32,双击installer.exe 二、先设置语言为中文 三、点击下一步 四、选择需要安装esxi的主机。 五、设置Vcenter虚拟机的密码...
java 进阶—线程的常用方法
大家好,通过java进阶—多线程,我们知道的什么是进程,什么是线程,以及线程的三种创建方式的选择 今天,我们来看看线程的基础操作 start() 开启线程 public class Demo implements Runnable {Overridepublic void run…...
hadoop的运行模式
作者简介:大家好我是小唐同学(๑><๑),好久不见,为梦想而努力的小唐又回来了,让我们一起加油!!! 个人主页:小唐同学(๑><๑)的博客主页 目前…...
服务器(centos7.6)已经安装了宝塔面板,想在里面安装一个SVN工具(subversion),应该如何操作呢?
首先,在登录进入宝塔面板,然后点击左侧终端,进入终端界面,如下图:------------------------------------------如果是第一次使用会弹出输入服务器用户名和密码,此时输入root账号和密码,即可进入…...
从智能进化模型看用友BIP的AI平台化能力
随着人工成本的上升,智能和自动化技术的成熟,企业在越来越多的场景开始应用自动化技术来替代相对标准及有规则的工作,同时利用智能算法来优化复杂工作及决策,获得竞争优势。 不同于阅读、聊天、搜索等面向终端用户的应用场景&…...
项目管理的主要内容包括哪些?盘点好用的项目管理系统软件
阅读本文您将了解:1、项目管理的主要内容包括哪些2、好用的项目管理软件 项目管理是为了实施一个特定目标,所实施的一系列针对项目要素的管理过程,包括过程、手段以及技术等。 通过项目管理,我们能够提前安排和控制项目的时间、…...
Allegro如何查看PCB上器件的库路径操作指导
Allegro如何查看PCB上器件的库路径操作指导 在做PCB设计的时候,有时需要检查PCB上器件使用的库的路径是否正确,Allegro支持快速将PCB上所有器件的库路径都列出来 如下图 如何显示这个报表,具体操作如下 点击Tools点击Report...
笔记【尚硅谷】大数据Canal教程丨Alibaba数据实时同步神器
视频教程:【尚硅谷】大数据Canal教程丨Alibaba数据实时同步神器教程资料:https://pan.baidu.com/s/1VhGBcqeywM6jyXJxtytd1w?pwd6666,提取码:6666本套教程以Canal的底层原理展开讲解,细致地介绍了Canal的安装部署及常…...
如何重定向命令行日志信息到指定txt文件?
如果你想把命令行的输出重定向到指定的txt文件,你可以使用一些符号来实现。例如,你可以在命令后面加上>或>>符号,然后指定文件名。例如: command > output.txt 这样就会把command的标准输出保存到output.txt文件中&…...
物理机不能访问虚拟机kali的web服务解决方案记录
目录 环境 问题描述 解决方案 知识补充 效果测试 其他思路 环境 kali(nat模式),物理机,可互ping 问题描述 kali的web服务器不能在物理机上访问。 1.本机能ping通虚拟机 2.虚拟机也能ping通本机 3.虚拟机能访问自己的web …...
服务器配置 | 在Windows本地显示远程服务器绘图程序
文章目录方法1:在MobaXterm的终端输入指令方法2:在Pycharm中运行前提概要,需要在本地Windows端显示点云的3d可视化界面 对于点云的3d可视化一般有两种方法,open3d显示或者是mayavi显示。这两个库都可以使用pip install来实现安装…...
从0开始学python -47
Python CGI编程 -2 GET和POST方法 浏览器客户端通过两种方法向服务器传递信息,这两种方法就是 GET 方法和 POST 方法。 使用GET方法传输数据 GET方法发送编码后的用户信息到服务端,数据信息包含在请求页面的URL上,以"?"号分割…...
深度解析 ConcurrentHashMap 1.8:put 与 get 核心流程全解
在 Java 并发编程中,ConcurrentHashMap 是线程安全的高频使用集合,相比线程不安全的 HashMap、效率低下的 HashTable(全锁),JDK 1.8 版本的 ConcurrentHashMap 做了底层结构重构和锁机制优化,成为高并发场景…...
时间切片:24小时
基于双层优化的电动汽车优化调度研究 代码主要做的是一个双层的电动汽车充放电行为优化问题,具体来讲,输电网上层优化将电动汽车与发电机、基本负荷协调,同时考虑风力发电,从而在时域内优化电动汽车的负荷周期。 然后,…...
用STM32+物联网做个智能药盒:手把手教你搞定毕设硬件选型与代码框架
基于STM32的智能药盒开发实战:从硬件选型到云端联调 在老龄化社会加速和慢性病管理需求激增的背景下,智能医疗设备正从医院走向家庭。作为嵌入式开发者,将STM32与物联网技术结合打造智能药盒,不仅能解决实际用药管理痛点ÿ…...
Java面向对象实战:从0到1手写奇偶判断工具类[特殊字符]新手保姆级教程
🌸你好呀!我是断弦承露🌟感谢陪伴~ 小白博主在线求友🌿 跟着小白学/Java/软件设计/鸿蒙开发/芯片开发📖专栏汇总:《软件设计师》专栏 | 《Java》专栏 | 《 RISC-V 处理器实战》专栏 | 《Flutter…...
3步释放20GB空间:给Android用户的系统减负指南
3步释放20GB空间:给Android用户的系统减负指南 【免费下载链接】universal-android-debloater Cross-platform GUI written in Rust using ADB to debloat non-rooted android devices. Improve your privacy, the security and battery life of your device. 项目…...
从IMU初始化到点云去畸变:深入Fast-LIO2的传感器融合核心流程
从IMU初始化到点云去畸变:Fast-LIO2传感器融合全流程解析 在自动驾驶和机器人定位领域,激光雷达与IMU的紧耦合系统正成为高精度状态估计的主流方案。Fast-LIO2作为这一技术路线的代表,其核心创新在于将IMU的动力学特性与激光点云几何特征深度…...
高密度PCB贴装实战:如何用模块化治具解决0.3mm间距元件定位难题
高密度PCB贴装实战:模块化治具在0.3mm间距元件定位中的创新应用 当智能手表的PCB板面积缩小到指甲盖大小时,上面的0402元件间距已经突破0.3mm极限——这相当于在1元硬币上精准摆放50根头发丝。消费电子微型化浪潮下,传统治具的定位误差正在吞…...
brpc连接池动态调整算法:基于排队理论的设计与实现
brpc连接池动态调整算法:基于排队理论的设计与实现 【免费下载链接】brpc brpc is an Industrial-grade RPC framework using C Language, which is often used in high performance system such as Search, Storage, Machine learning, Advertisement, Recommendat…...
Simcenter Amesim 2023与Matlab 2023a联合仿真:从环境配置到实战例程详解
1. 联合仿真环境搭建前的准备工作 在开始Simcenter Amesim 2023与Matlab 2023a的联合仿真之前,我们需要做好充分的准备工作。这就像盖房子前要打好地基一样重要,否则后续工作可能会遇到各种意想不到的问题。 首先说说硬件要求。根据我的实测经验…...
Cosmos-Reason1-7B企业应用案例:研发团队用它做内部技术文档逻辑校验与补全
Cosmos-Reason1-7B企业应用案例:研发团队用它做内部技术文档逻辑校验与补全 1. 引言:技术文档的“逻辑陷阱”与AI解法 想象一下这个场景:你所在的研发团队刚刚完成了一个新模块的开发,需要撰写一份详细的技术设计文档。文档洋洋…...
