当前位置: 首页 > 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;编译器将…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...