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定义左边箭头,包括下级出现连线
效果图: 代码: <template><div class"agency-wrap"><el-treeclass"filter-tree":data"detailList":props"defaultProps"default-expand-allnode-click"onClickNode":filter-node-me…...
C++ 多线程顺序打印
打印要求: 三个打印线程顺序进行。 线程要求如下: 线程A:打印A 线程B:打印B 线程C:打印C 打印结果: A B C A B C A B C A B C A B C 法一:需要锁和共享变量 #include <iostream>…...
x-cmd pkg | duf - df 命令的现代化替代品
目录 简介用户首次快速实验指南技术特点竞品和相关作品进一步探索 简介 Duf (Disk Usage/Free Utility)是一个磁盘分析工具。其直观的输出和多样化的自定义选项,帮助用户更好地管理和优化存储资源。 用户首次快速实验指南 使用 x duf 即可自…...
202406读书笔记|《沉睡的线条世界》——翻山越岭,只为与你分享点滴的快乐
《沉睡的线条世界》登登登Dn绘著,简简单单的小画,简简单单的线条,简简单单的语言,温馨又有一点暖心。 怎样的你都好,做最真实的自己。 部分节选如下: 愿你我永远有热情,永远能为生活的每一个小惊…...
[论文阅读]4DRadarSLAM: A 4D Imaging Radar SLAM System for Large-scale Environments
目录 1.摘要和引言: 2. 系统框架: 2.1 前端: 2.2 回环检测: 2.3 后端: 3.实验和分析: 4.结论 1.摘要和引言: 这篇论文介绍了一种名为“4DRadarSLAM”的新型4D成像雷达SLAM系统࿰…...
Python: vars()详细解释
vars() 是一个内置函数,用于返回一个对象的 __dict__ 属性。它接受一个对象作为参数,如果省略参数,它返回当前局部作用域的字典。 具体而言,vars() 的行为取决于参数的类型: 1. 没有参数: 如果没有提供参…...
2024年1月15日Arxiv最热论文推荐:斯坦福LLM精准微调新框架、GPT不愿承认回答错误、速度快15倍的3D全景分割新突破
本文整理了今日发表在ArXiv上的AI论文中最热门的TOP5。 论文解读、论文热度排序、论文标签、中文标题、推荐理由和论文摘要均由赛博马良平台上的智能体 「AI论文解读达人」提供。 如需查看其他热门论文,欢迎移步赛博马良 ^_^ TOP1 APAR: LLMs Can Do Auto-Paral…...
1.5 面试经典150题 - 轮转数组
轮转数组 给定一个整数数组 nums,将数组中的元素向右轮转 k 个位置,其中 k 是非负数。 注意:本题需要原地操作 class Solution(object):def rotate(self, nums, k):""":type nums: List[int]:type k: int:rtype: None Do not…...
Linux的基础命令学习
pwd - 显示当前工作目录的路径 cd - 切换工作目录,ls - 列出当前目录的文件和子目录 rm - 删除文件或目录 mkdir - 创建新目录 rm - 删除目录 nano/vi - 编辑文本文件,按Enter键进入 之后按i键就可以进入写入模式 之后输入文字以后按Esc键与:q就不保…...
个人数据备份方案分享(源自一次悲惨经历)
文章目录 1 起源2 备份架构2.1 生活照片2.2 生活录音2.3 微信文件2.4 工作文件2.5 笔记、影视音乐、书籍 3 使用工具介绍3.1 小米云服务3.2 中国移动云盘3.3 小米移动硬盘(1T)3.4 FreeFileSync 4 总结 1 起源 本文的灵感源于我个人的一次不幸遭遇&#…...
SpringBoot教程(八) | SpringBoot统一结果封装
SpringBoot教程(八) | SpringBoot统一结果封装 经过了前面几篇文章,SpringBoot中MVC相关的配置其实都已经差不多了,接下来就可以完全进入接口开发阶段了。前面我们写过几个接口,虽然都加了RestController注解,相当于统一了我们的…...
Ubuntu 22.04 安装Fail2Ban
Fail2Ban是一种用来防止暴力破解的工具,一般要和iptables配合使用。其原理是读取系统日志,并通过正则表达式匹配,监控IP在一段时间内的登录尝试、身份验证失败日志等并进行计数。超过阈值则进行IP封禁,过一段时间后再解封。 总的…...
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驱动,需要重新编译MYSQL数据库驱动的问题以…...
Mindspore 公开课 - CodeGeeX
CodeGeeX: 多语言代码生成模型 CodeGeeX 是一个具有130亿参数的多编程语言代码生成预训练模型。CodeGeeX采用华为MindSpore框架实现,在鹏城实验室“鹏城云脑II”中的192个节点(共1536个国产昇腾910 AI处理器)上训练而成。截至2022年6月22日&…...
说一下mysql的锁
1、全局锁: 影响整个数据库的锁。例如,当执行 FLUSH TABLES WITH READ LOCK; 命令时,会阻止其他用户写入数据库,但可以读取。全局锁简介 全局锁是一种跨所有数据库实例的锁。它可以确保在任何时刻,只有一个事务能够访问共享资源。全局锁通常用于以下场景: 并发性较高的场…...
rime中州韵小狼毫 日期/农历 时间 事件 节气 滤镜
教程目录:rime中州韵小狼毫须鼠管安装配置教程 保姆级教程 100增强功能配置教程 网络上但凡提到 rime中州韵小狼毫须鼠管输入法,总少不了智能时间,日期等炫技,可见这个便捷时间/日期输入功能是多么的受欢迎。作者也不落窠臼&…...
【前端】前后端的网络通信基础操作(原生ajax, axios, fetch)
概述 前后端网络请求工具 原生ajaxfetch apiaxios GET和POST请求 get只能发纯文本 post可以发不同类型的数据,要设置请求头,需要告诉服务器一些额外信息 测试服务器地址 有一些公共的测试 API 可供学习和测试用途。这些 API 允许你发送 HTTP 请求…...
Matter - 配置工厂数据(2)
部分关键名词参数简介 PASE(Passcode-Authenticated Session Establishment): 基于密码认证的会话建立,用于在 Commissioning 的时候 Commissioner 与 Matter Deivce 之间建立安全信道,生成对称加密密钥用于 Commissioning 后续通信消息进行加、解密和完…...
版本控制背景知识
版本控制背景知识 本文是关于 Git 系列文章的导读,我们先介绍一下版本控制的背景知识。 什么是版本控制 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统。它将什么时候、什么人更改了文件的什么内容等信息如实记录下来…...
tensorflow报错: DNN library is no found
错误描述 如上图在执行程序的时候,会出现 DNN library is no found 的报错 解决办法 这个错误基本上说明你安装的 cudnn有问题,或者没有安装这个工具。 首先检测一下你是否安装了 cudnn 进入CUDA_HOME下,也就是进入你的cuda的驱动的安装目…...
Oracle查询表空间大小
1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...
系统设计 --- MongoDB亿级数据查询优化策略
系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log,共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题,不能使用ELK只能使用…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
鱼香ros docker配置镜像报错:https://registry-1.docker.io/v2/
使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题:docker pull 失败 网络不同,需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...
ios苹果系统,js 滑动屏幕、锚定无效
现象:window.addEventListener监听touch无效,划不动屏幕,但是代码逻辑都有执行到。 scrollIntoView也无效。 原因:这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作,从而会影响…...
听写流程自动化实践,轻量级教育辅助
随着智能教育工具的发展,越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式,也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建,…...
Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信
文章目录 Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket(服务端和客户端都要)2. 绑定本地地址和端口&#x…...
七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...
MySQL 知识小结(一)
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库,分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷,但是文件存放起来数据比较冗余,用二进制能够更好管理咱们M…...
