当前位置: 首页 > news >正文

element-tree-line el-tree 添加结构线 添加虚线

概览:给element组件添加上虚线,通过使用插件element-tree-line

参考连接:

参考别人的博客

安装插件:

# npm
npm install element-tree-line -S

# yarn
yarn add element-tree-line -S

main.js全局注册引入插件:

 

import { getElementLabelLine } from 'element-tree-line';
import 'element-tree-line/dist/style.css';
const ElementLabelLine = getElementLabelLine(h);
app.component(ElementLabelLine.name, ElementLabelLine);

el-tree组件封装:

<template><el-tree ref="treeRef" class="tree-content" :data="props.treeData" node-key="id" :highlight-current="true":props="props.defaultProps" icon="none" :current-node-key='0' default-expand-all :indent="props.treeIndent"><template #default="{ node, data }"><element-tree-line :node="node" :showLabelLine="false" :indent="props.treeIndent"><template v-slot:node-label><div class="com-tree"><i v-if="data.children?.length > 0":class="node.expanded ? 'iconfont icon-pinleijianshao' : 'iconfont icon-pinleizengjia'"class="tree-icon"></i><span class="com-tree-text" @click="nodeClick(data)">{{ node.label }}</span></div></template></element-tree-line></template></el-tree>
</template><script setup>
let props = defineProps({ treeData: Array, defaultProps: Object, treeIndent: Number });
const emits = defineEmits(['nodeClick']);
const nodeClick = (data) => {emits('nodeClick', data);
};
</script>

el-tree页面组件使用:

 

<el-scrollbar><Tree :treeData="data.treeData" :defaultProps="defaultProps" :treeIndent="data.treeIndent"@nodeClick="hanleNodeClick"></Tree>
</el-scrollbar>

 效果展示:

 

相关文章:

element-tree-line el-tree 添加结构线 添加虚线

概览&#xff1a;给element组件添加上虚线&#xff0c;通过使用插件element-tree-line 参考连接&#xff1a; 参考别人的博客 安装插件&#xff1a; # npm npm install element-tree-line -S # yarn yarn add element-tree-line -S main.js全局注册引入插件&#xff1a; imp…...

【Lua学习笔记】Lua进阶——函数和闭包

文章目录 函数函数嵌套闭包Closures可变函数函数重载 函数 函数嵌套 function A()print("这里是函数A")return function ()print("返回函数不要起名")end end B A() B()输出&#xff1a; 这里是函数A 返回函数不要起名使用函数嵌套的用法&#xff0c;我…...

大学生竞赛管理系统springboot比赛报名信息java jsp源代码mysql

本项目为前几天收费帮学妹做的一个项目&#xff0c;Java EE JSP项目&#xff0c;在工作环境中基本使用不到&#xff0c;但是很多学校把这个当作编程入门的项目来做&#xff0c;故分享出本项目供初学者参考。 一、项目描述 大学生竞赛管理系统springboot 系统有3权限&#xff…...

UnixBench 5.1.3 银河麒麟桌面操作系统V10 (SP1) ARM64 aarch64 图形性能测试 2d 3d, glmark2 3d测试

编译 安装libgl sudo apt install libgl-dev yeqiangyeqiang-greatwall:~/Downloads/UnixBench$ sudo apt install libgl-dev [sudo] yeqiang 的密码&#xff1a; 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 下列软件包…...

JavaScript高级——ES6基础入门

目录 前言let 和 const块级作用域模板字符串一.模板字符串是什么二.模板字符串的注意事项三. 模板字符串的应用 箭头函数一.箭头函数是什么二.普通函数与箭头函数的转换三.this指向1. 全局作用域中的 this 指向2. 一般函数&#xff08;非箭头函数&#xff09;中的this指向3.箭头…...

2023年超越期待的高性能视频剪辑主机推荐| Intel 蝰蛇峡谷测评

1、开箱 蝰蛇峡谷的开箱体验是非常令人兴奋的。首先&#xff0c;打开包装后&#xff0c;你会看到一个精致且高质感的机箱&#xff0c;给人一种专业的感觉。蝰蛇峡谷的外观设计简洁大方&#xff0c;黑色的机箱与红色的Logo相得益彰&#xff0c;展现了其高性能的特点。 在打开机…...

1400*A. Factory

Examples input 1 5 output No input 3 6 output Yes 题意&#xff1a; a 和 m&#xff0c;a 不断加 a%m &#xff0c;如果 a 有一次能够被 m 整除&#xff0c;则打印 Yes&#xff0c;如果一直循环永远不可能被 m 整除&#xff0c;则打印 No 解析&#xff1a; 可以观…...

OpenHarmony开源鸿蒙学习入门 - 基于3.2Release 应用开发环境安装

OpenHarmony开源鸿蒙学习入门 - 基于3.2Release 应用开发环境安装 基于目前官方master主支&#xff0c;最新文档版本3.2Release&#xff0c;更新应用开发环境安装文档。 一、安装IDE&#xff1a; 1.IDE安装的系统要求 2.IDE下载官网链接&#xff08;IDE下载链接&#xff09; …...

Linux 查看服务器内存、CPU、网络等占用情况的命令

1、查看物理CPU个数&#xff1a;cat cat /proc/cpuinfo | grep "physical id" | sort | uniq | wc -l 2、查看服务器CPU内核个数&#xff1a;cat 每个物理CPU中core的个数&#xff08;即核数&#xff09; cat /proc/cpuinfo | grep "cpu cores" | u…...

调用webservice导excel文件内容进入数据库

一个早期vb.net写的程序,需要增加功能,要导入excel数据,并按条件显示。 1.数据库端 1.1因为是要把表作为存储过程的输入参数,所以先新建一个数据类型xtabletype create type xtabletype as table(prodid varchar(20),itemid varchar(20),target varchar(150)) 1.2新建…...

*CTF 2023 web jwt2struts 题解wp

jwt2struts 根据题目名字猜测&#xff0c;这题考察jwt和Struts2 包里面果然有一个cookie 验证了&#xff0c;是jwt eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1c2VyIiwiZXhwIjoyMDA2MjI1MjgxfQ.F7vOtdqg48M1DYK4tVZywTipIYDqKfsBSju7ekLSecU 我们的目标应该是把user改…...

使用java实时获取手环、手表的健康数据

吐槽 最近在自研开发一款有关读取健康数据的APP 但是数据来源非常稀少&#xff0c;申请了市面上所有的国内厂商的手环api都被拒了&#xff08;因为是个人开发&#xff09; 找了很久发现fitbit有开源的api于是淘了个fitbit的手表开始开发 Web API (fitbit.com) 在上述连接可…...

Maven右侧依赖Dependencies消失

项目右侧的Maven依赖Dependencies突然消失&#xff0c;项目中的注解都出现报错&#xff0c;出现这种情况应该是因为IDEA版本早于maven版本&#xff0c;重新检查项目中的Maven路径&#xff0c;选择File->Settings->搜索Maven&#xff0c;检查Maven home directory&#xf…...

100% RNN language model ChatRWKV 相关开源项目

RWKV(读作RwaKuv)借鉴了RNN的移动平均模型&#xff08;MA&#xff09;&#xff0c;将transformer的 O ( T 2 d ) O(T^2d) O(T2d)复杂度降低到 O ( T d ) O(Td) O(Td)&#xff0c;同时保持较好的结果表现。RWKV也是一个开源模型&#xff0c;甚至其介绍主页的html代码都有开源。以…...

ElasticSearch Window Linux部署

文章目录 一、Window 集群部署二、Linux 单节点部署三、Linux 集群部署 一、Window 集群部署 创建 elasticsearch-cluster 文件夹&#xff0c;在内部复制三个elasticsearch服务 修改集群文件目录中每个节点的 config/elasticsearch.yml 配置文件 # -----------------------…...

MyBatis-Plus 分页插件实现分页查询

目录 1. 配置分页查询的拦截器 2. 使用 Page 对象实现分页功能 1. 配置分页查询的拦截器 因为 MyBatis-Plus 里面使用了分页插件来实现分页查询, 所以我们需要将 MyBatis-Plus 的插件添加到当前的项目里, 这样我们执行的查询操作才会生效. 创建 PageConfig 类: Configurat…...

Nacos源码 (1) 源码编译及idea环境

本文介绍从gitee下载nacos源码&#xff0c;在本地编译&#xff0c;并导入idea进行本地调试。 从gitee下载源码 由于github访问速度慢&#xff0c;所以我选择使用gitee的镜像仓库&#xff1a; git clone https://gitee.com/mirrors/Nacos.git本文使用2.0.2版本&#xff0c;所…...

docker配置文件挂载(容器数据管理)

目录 数据卷&#xff08;容器数据管理&#xff09;什么是数据卷数据集操作命令创建和查看数据卷挂载数据卷案例案例-给nginx挂载数据卷案例-给MySQL挂载本地目录 总结 数据卷&#xff08;容器数据管理&#xff09; 在之前的nginx案例中&#xff0c;修改nginx的html页面时&#…...

uniAPP 视频图片预览组件

效果图 思路&#xff1a;处理文件列表&#xff0c;根据文件类型归类 已兼容 H5 ios 设备&#xff0c;测试已通过 浙政钉&#xff0c;微信小程序 视频资源因为&#xff0c;没有预览图&#xff0c;用灰色图层加播放按钮代替 <template><!--视频图片预览组件 -->&l…...

【论文阅读】The Deep Learning Compiler: A Comprehensive Survey

论文来源&#xff1a;Li M , Liu Y , Liu X ,et al.The Deep Learning Compiler: A Comprehensive Survey[J]. 2020.DOI:10.1109/TPDS.2020.3030548. 这是一篇关于深度学习编译器的综述类文章。 什么是深度学习编译器 深度学习&#xff08;Deep Learning&#xff09;编译器将…...

视频修复终极指南:如何用UNTRUNC拯救你的损坏视频文件

视频修复终极指南&#xff1a;如何用UNTRUNC拯救你的损坏视频文件 【免费下载链接】untrunc Restore a damaged (truncated) mp4, m4v, mov, 3gp video. Provided you have a similar not broken video. 项目地址: https://gitcode.com/gh_mirrors/unt/untrunc 还记得那…...

AI Agent架构实战教程(非常详细),从被动唤醒到主动守望,收藏这一篇就够了!

在LLM驱动的应用进入深水区后&#xff0c;开发者们发现&#xff1a;即便Agent再聪明&#xff0c;如果它只能停留在“你问我答”的被动模式&#xff0c;就永远无法触达“私人助理”的核心体验。 从OpenAI的ChatGPT Tasks到百度的“心响”产品、腾讯元宝定时任务&#xff0c;行业…...

别再为Block Design里Bram深度改不了发愁了!手把手教你用Address Editor搞定(附深度换算详解)

突破Block Design中Bram深度修改困境&#xff1a;Address Editor实战指南 在FPGA开发过程中&#xff0c;Block Design的可视化设计方式极大提升了开发效率&#xff0c;但同时也隐藏着一些让开发者困惑的"陷阱"。其中&#xff0c;Bram IP核深度参数无法直接修改的问题…...

OpenCV实战:从相机响应函数(CRF)到HDR图像合成的完整流程解析

1. 相机响应函数(CRF)基础解析 第一次听说相机响应函数(CRF)时&#xff0c;我也是一头雾水。简单来说&#xff0c;CRF就是描述相机如何把真实世界的光线强度(L)转换成图像像素值(B)的数学关系。想象一下&#xff0c;你拿着手机对着同一个场景拍三张照片&#xff1a;一张很暗、一…...

使用Alpine配置WSL ssh门户

1. 哑铃图是什么&#xff1f; 哑铃图&#xff08;Dumbbell Plot&#xff09;&#xff0c;有时也称为DNA图或杠铃图&#xff0c;是一种用于比较两个相关数据点的可视化图表。 它源于人们对更有效数据比较方式的持续探索。 在传统的时间序列比较中&#xff0c;我们通常使用两条折…...

保姆级教程:用SolidWorks URDF插件把你的机械设计变成Gazebo仿真模型

从SolidWorks到Gazebo&#xff1a;机械设计仿真全流程实战指南 机械工程师们常常面临一个挑战&#xff1a;如何在虚拟环境中快速验证设计方案的可行性&#xff1f;SolidWorks作为主流的三维设计工具&#xff0c;与Gazebo这一强大的机器人仿真平台结合&#xff0c;能够实现从概念…...

告别环境配置烦恼:在Windows上通过VSCode与ESP-IDF快速搭建ESP32开发环境

1. 为什么选择VSCodeESP-IDF开发ESP32&#xff1f; 作为一个从Arduino转向ESP32开发的过来人&#xff0c;我深刻理解新手在环境配置上的痛苦。传统方法需要手动安装Python、Git、交叉编译工具链等十多个组件&#xff0c;光是处理环境变量冲突就能让人崩溃一整天。直到发现VSCod…...

深入RK3588 NPU架构:从NVDLA远亲到CNN加速器的设计取舍与性能真相

RK3588 NPU架构深度解构&#xff1a;CNN加速器的设计哲学与性能边界 当一块指甲盖大小的芯片宣称能提供6 TOPS的AI算力时&#xff0c;我们不禁要问&#xff1a;这数字背后隐藏着怎样的工程智慧与妥协&#xff1f;RK3588的NPU模块正引发这样的思考——它既非纯粹的学术创新&…...

1688图搜接口有复购率对于选品的你们有帮助吗

1688 图搜接口的复购率数据&#xff0c;对选品非常有帮助&#xff0c;是判断商品长期生命力与供应链稳定性的核心指标。一、复购率在图搜选品中的核心价值验证商品质量与用户粘性高复购率&#xff08;B 端通常 > 20%&#xff0c;优秀 > 30%&#xff09;直接证明商品质量稳…...

无人机飞控实战:四元数微分方程在PX4中的实现与调参技巧

无人机飞控实战&#xff1a;四元数微分方程在PX4中的实现与调参技巧 当无人机在复杂环境中执行高速机动时&#xff0c;传统欧拉角描述姿态会出现万向节锁死现象。去年调试一台行业级六旋翼时&#xff0c;就曾遇到俯仰角接近90时控制器突然发散的情况——这正是欧拉角奇异点的典…...