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

el-tree定义左边箭头,包括下级出现连线

效果图:

 

代码: 

<template><div class="agency-wrap"><el-treeclass="filter-tree":data="detailList":props="defaultProps"default-expand-all@node-click="onClickNode":filter-node-method="filterNode"ref="tree"></el-tree></div>
</template><script>
export default {data () {return {detailList: [{id: 1,label: '一级 1',children: [{id: 4,label: '二级 1-1',children: [{id: 9,label: '三级 1-1-1'}, {id: 10,label: '三级 1-1-2'}]}]}, {id: 2,label: '一级 2',children: [{id: 5,label: '二级 2-1'}, {id: 6,label: '二级 2-2'}]}, {id: 3,label: '一级 3',children: [{id: 7,label: '二级 3-1'}, {id: 8,label: '二级 3-2'}]}],defaultProps: {children: 'children',label: 'label'}}},methods: {onClickNode (data) {console.log(data)},filterNode (value, data) {if (!value) return truereturn data.label.indexOf(value) !== -1}}
}
</script><style lang="scss" scoped>
.agency-wrap {@include wh(100%, 200px);background-color: pink;overflow: auto;margin-bottom: 20px;::v-deep .el-tree-node__label {font-size: 6px;}::v-deep {.el-icon-arrow-right::before {font-size: 6px;}}::v-deep .el-tree > .el-tree-node:after {border-top: none;}::v-deep .el-tree-node {position: relative;padding-left: 5px;}::v-deep .el-tree-node__children {padding-left: 5px;}::v-deep .el-tree-node :last-child:before {height: 16px;}::v-deep .el-tree-node:before {content: '';left: -2px;position: absolute;right: auto;border-width: .5px;}::v-deep .el-tree-node:after {content: '';left: -2px;position: absolute;right: auto;border-width: .5px;}::v-deep .el-tree-node:before {border-left: .5px dashed #1389BC;bottom: 0px;height: 100%;top: -13px;width: .5px;}::v-deep .el-tree {//   overflow-y: auto;//   overflow-x: scroll;overflow: auto;height: 100%;/*width:200px;*///   border: 1px solid blue;}::v-deep .el-tree-node:after {border-top: .5px dashed #1389BC;height: 10px;top: 6px;width: 9px;}::v-deep .el-tree .el-tree-node__expand-icon.expanded {-webkit-transform: rotate(0deg);transform: rotate(0deg);}::v-deep .el-tree .el-icon-caret-right:before {content: "\e723";font-size: 8px;color: #1389BC;position: absolute;left: -6px;top: -4px;}::v-deep .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {content: "\e722";font-size: 8px;color: #1389BC;position: absolute;left: -6px;top: -4px;}::v-deep .el-tree-node__content > .el-tree-node__expand-icon {padding: 0;padding-left: 8px;}
}
</style>

相关文章:

el-tree定义左边箭头,包括下级出现连线

效果图&#xff1a; 代码&#xff1a; <template><div class"agency-wrap"><el-treeclass"filter-tree":data"detailList":props"defaultProps"default-expand-allnode-click"onClickNode":filter-node-me…...

C++ 多线程顺序打印

打印要求&#xff1a; 三个打印线程顺序进行。 线程要求如下&#xff1a; 线程A&#xff1a;打印A 线程B&#xff1a;打印B 线程C&#xff1a;打印C 打印结果&#xff1a; A B C A B C A B C A B C A B C 法一&#xff1a;需要锁和共享变量 #include <iostream>…...

x-cmd pkg | duf - df 命令的现代化替代品

目录 简介用户首次快速实验指南技术特点竞品和相关作品进一步探索 简介 Duf &#xff08;Disk Usage/Free Utility&#xff09;是一个磁盘分析工具。其直观的输出和多样化的自定义选项&#xff0c;帮助用户更好地管理和优化存储资源。 用户首次快速实验指南 使用 x duf 即可自…...

202406读书笔记|《沉睡的线条世界》——翻山越岭,只为与你分享点滴的快乐

《沉睡的线条世界》登登登Dn绘著&#xff0c;简简单单的小画&#xff0c;简简单单的线条&#xff0c;简简单单的语言&#xff0c;温馨又有一点暖心。 怎样的你都好&#xff0c;做最真实的自己。 部分节选如下&#xff1a; 愿你我永远有热情&#xff0c;永远能为生活的每一个小惊…...

[论文阅读]4DRadarSLAM: A 4D Imaging Radar SLAM System for Large-scale Environments

目录 1.摘要和引言&#xff1a; 2. 系统框架&#xff1a; 2.1 前端&#xff1a; 2.2 回环检测&#xff1a; 2.3 后端&#xff1a; 3.实验和分析&#xff1a; 4.结论 1.摘要和引言&#xff1a; 这篇论文介绍了一种名为“4DRadarSLAM”的新型4D成像雷达SLAM系统&#xff0…...

Python: vars()详细解释

vars() 是一个内置函数&#xff0c;用于返回一个对象的 __dict__ 属性。它接受一个对象作为参数&#xff0c;如果省略参数&#xff0c;它返回当前局部作用域的字典。 具体而言&#xff0c;vars() 的行为取决于参数的类型&#xff1a; 1. 没有参数&#xff1a; 如果没有提供参…...

2024年1月15日Arxiv最热论文推荐:斯坦福LLM精准微调新框架、GPT不愿承认回答错误、速度快15倍的3D全景分割新突破

本文整理了今日发表在ArXiv上的AI论文中最热门的TOP5。 论文解读、论文热度排序、论文标签、中文标题、推荐理由和论文摘要均由赛博马良平台上的智能体 「AI论文解读达人」提供。 如需查看其他热门论文&#xff0c;欢迎移步赛博马良 ^_^ TOP1 APAR: LLMs Can Do Auto-Paral…...

1.5 面试经典150题 - 轮转数组

轮转数组 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 注意&#xff1a;本题需要原地操作 class Solution(object):def rotate(self, nums, k):""":type nums: List[int]:type k: int:rtype: None Do not…...

Linux的基础命令学习

pwd - 显示当前工作目录的路径 cd - 切换工作目录&#xff0c;ls - 列出当前目录的文件和子目录 rm - 删除文件或目录 mkdir - 创建新目录 rm - 删除目录 nano/vi - 编辑文本文件&#xff0c;按Enter键进入 之后按i键就可以进入写入模式 之后输入文字以后按Esc键与:q就不保…...

个人数据备份方案分享(源自一次悲惨经历)

文章目录 1 起源2 备份架构2.1 生活照片2.2 生活录音2.3 微信文件2.4 工作文件2.5 笔记、影视音乐、书籍 3 使用工具介绍3.1 小米云服务3.2 中国移动云盘3.3 小米移动硬盘&#xff08;1T&#xff09;3.4 FreeFileSync 4 总结 1 起源 本文的灵感源于我个人的一次不幸遭遇&#…...

SpringBoot教程(八) | SpringBoot统一结果封装

SpringBoot教程(八) | SpringBoot统一结果封装 经过了前面几篇文章&#xff0c;SpringBoot中MVC相关的配置其实都已经差不多了&#xff0c;接下来就可以完全进入接口开发阶段了。前面我们写过几个接口&#xff0c;虽然都加了RestController注解&#xff0c;相当于统一了我们的…...

Ubuntu 22.04 安装Fail2Ban

Fail2Ban是一种用来防止暴力破解的工具&#xff0c;一般要和iptables配合使用。其原理是读取系统日志&#xff0c;并通过正则表达式匹配&#xff0c;监控IP在一段时间内的登录尝试、身份验证失败日志等并进行计数。超过阈值则进行IP封禁&#xff0c;过一段时间后再解封。 总的…...

Ubuntu 22.04 编译安装 Qt mysql驱动

参考自 Ubuntu20.04.3 QT5.15.2 MySQL驱动编译 Ubuntu 18.04 编译安装 Qt mysql驱动 下边这篇博客不是主要参考的, 但是似乎解决了我的难题(找不到 libmysqlclient.so) ubuntu18.04.2 LTS 系统关于Qt5.12.3 无法加载mysql驱动&#xff0c;需要重新编译MYSQL数据库驱动的问题以…...

Mindspore 公开课 - CodeGeeX

CodeGeeX: 多语言代码生成模型 CodeGeeX 是一个具有130亿参数的多编程语言代码生成预训练模型。CodeGeeX采用华为MindSpore框架实现&#xff0c;在鹏城实验室“鹏城云脑II”中的192个节点&#xff08;共1536个国产昇腾910 AI处理器&#xff09;上训练而成。截至2022年6月22日&…...

说一下mysql的锁

1、全局锁: 影响整个数据库的锁。例如,当执行 FLUSH TABLES WITH READ LOCK; 命令时,会阻止其他用户写入数据库,但可以读取。全局锁简介 全局锁是一种跨所有数据库实例的锁。它可以确保在任何时刻,只有一个事务能够访问共享资源。全局锁通常用于以下场景: 并发性较高的场…...

rime中州韵小狼毫 日期/农历 时间 事件 节气 滤镜

教程目录&#xff1a;rime中州韵小狼毫须鼠管安装配置教程 保姆级教程 100增强功能配置教程 网络上但凡提到 rime中州韵小狼毫须鼠管输入法&#xff0c;总少不了智能时间&#xff0c;日期等炫技&#xff0c;可见这个便捷时间/日期输入功能是多么的受欢迎。作者也不落窠臼&…...

【前端】前后端的网络通信基础操作(原生ajax, axios, fetch)

概述 前后端网络请求工具 原生ajaxfetch apiaxios GET和POST请求 get只能发纯文本 post可以发不同类型的数据&#xff0c;要设置请求头&#xff0c;需要告诉服务器一些额外信息 测试服务器地址 有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求…...

Matter - 配置工厂数据(2)

部分关键名词参数简介 PASE(Passcode-Authenticated Session Establishment): 基于密码认证的会话建立&#xff0c;用于在 Commissioning 的时候 Commissioner 与 Matter Deivce 之间建立安全信道&#xff0c;生成对称加密密钥用于 Commissioning 后续通信消息进行加、解密和完…...

版本控制背景知识

版本控制背景知识 本文是关于 Git 系列文章的导读&#xff0c;我们先介绍一下版本控制的背景知识。 什么是版本控制 版本控制是一种记录一个或若干文件内容变化&#xff0c;以便将来查阅特定版本修订情况的系统。它将什么时候、什么人更改了文件的什么内容等信息如实记录下来…...

tensorflow报错: DNN library is no found

错误描述 如上图在执行程序的时候&#xff0c;会出现 DNN library is no found 的报错 解决办法 这个错误基本上说明你安装的 cudnn有问题&#xff0c;或者没有安装这个工具。 首先检测一下你是否安装了 cudnn 进入CUDA_HOME下&#xff0c;也就是进入你的cuda的驱动的安装目…...

大模型提示词驱动的工业图像标注流水线实战

1. 这不是“打标签”&#xff0c;而是让大模型替你做标注决策的整套工作流“Prompt-Based Automated Data Labeling and Annotation”——光看这个标题&#xff0c;很多人第一反应是&#xff1a;“哦&#xff0c;用大模型自动打标签”。但干过三年以上NLP数据工程、带过两个以上…...

2026年图片换背景免费工具完全指南:一键抠图软件推荐

现在是5月&#xff0c;我想很多人都在为各种证件照、商品图、头像等需要换背景的图片犯愁。前两天有朋友问我"哪个软件可以给图片换背景"&#xff0c;我才意识到很多人还在用古老的PS或者繁琐的在线工具。今天就来给大家分享一下2026年最好用的图片换背景工具&#x…...

保姆级教程:用Forge 1.16.3给你的Minecraft服务器装Mod,从下载到联机全流程

保姆级教程&#xff1a;用Forge 1.16.3给你的Minecraft服务器装Mod&#xff0c;从下载到联机全流程 和朋友一起玩Minecraft原版生存久了&#xff0c;难免会想尝试更多新玩法。Mod能为游戏带来全新生物、装备、魔法系统甚至维度冒险&#xff0c;但很多玩家在搭建Mod服务器时会被…...

太秀了,我把自己蒸馏成了 Skill!已开源

最近 GitHub 上掀起了一股「AI 蒸馏」热潮&#xff0c;这里的蒸馏可不是酿酒&#xff0c;而是把身边的人封装成 AI 技能包——同事.skill、老板.skill、搭档.skill 等各类蒸馏项目层出不穷&#xff0c;大家都在把身边人的工作经验、说话风格、做事逻辑&#xff0c;做成可直接使…...

后端程序员必看:3-6个月从0到1转型高薪AI应用

本文针对传统后端程序员想转型AI应用开发的焦虑&#xff0c;提出了一条省时、高薪、稳定的转型路线。文章指出&#xff0c;转型AI应用开发的核心是复用后端优势&#xff0c;走“后端AI集成”的复合型路线&#xff0c;而非死磕底层算法。文章详细规划了3-6个月的转型路线&#x…...

NodeMCU PyFlasher:让物联网开发变得简单的固件烧录神器

NodeMCU PyFlasher&#xff1a;让物联网开发变得简单的固件烧录神器 【免费下载链接】nodemcu-pyflasher Self-contained NodeMCU flasher with GUI based on esptool.py and wxPython. 项目地址: https://gitcode.com/gh_mirrors/no/nodemcu-pyflasher 还在为NodeMCU开…...

不止于Kali:在Ubuntu、Debian上给COMFAST CF-812AC无线网卡装RTL8812BU驱动的通用教程

跨平台兼容&#xff1a;Ubuntu/Debian系统安装COMFAST CF-812AC无线网卡驱动全指南 COMFAST CF-812AC作为一款高性价比的双频无线网卡&#xff0c;凭借Realtek RTL8812BU芯片的稳定表现&#xff0c;成为许多开发者和技术爱好者的首选。然而&#xff0c;当用户从Kali Linux转向U…...

深度解构:指纹浏览器底层隔离与Python高并发RPA,如何重塑电商矩阵自动化架构?

大家好&#xff0c;我是林焱&#xff0c;一名专注电商底层业务逻辑与 RPA 自动化架构定制的独立开发者。 在 CSDN 的各个技术板块中&#xff0c;关于爬虫与反爬虫、并发调度、以及客户端架构的讨论一直是热点。而将这些技术综合应用到极致的领域之一&#xff0c;就是当下极度内…...

为什么设计师集体弃用Sora 2改投Veo?——从渲染延迟、长时序连贯性到版权水印支持的6维生产力对比

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Veo vs Sora 2视频质量对比测试全景概览 为客观评估当前主流生成式视频模型的视觉保真度与时空一致性&#xff0c;我们构建了统一测试基准&#xff0c;涵盖运动连贯性、纹理细节还原、文本-视频对齐精度…...

多模态AI处理利器:基于MCP协议的Stitch-Pro服务器架构解析

1. 项目概述&#xff1a;一个面向多模态内容处理的“缝合”利器 最近在折腾一个挺有意思的开源项目&#xff0c;叫 stitch-pro-mcp 。这个名字挺直白&#xff0c;“stitch”是缝合&#xff0c;“pro”是专业版&#xff0c;“mcp”则指向了“模型上下文协议”。简单来说&#…...