elementui tree 层级过多时,高亮状态无法选满整行

问题:

 如上图所示,官方的tree组件,在层级很多时 elementui -tree 的高亮状态并没有选中整行。

(衍生库 vue-easy-tree 也会出现此问题)

原因: 

(没有查看源码,只是根据dom简单定位了一下,实际可能并不是这个原因)

添加高亮状态的 div 并没有随着子级的展开而适应宽度,所有的tree-node 的宽度在初始化的时候就固定了。

解决方式:

.el-tree-node{width: fit-content;min-width: var(--treeWidth);}

通过fit-content 可以将宽度随着内容撑开,而min-width 会保证没有那么多层级时也可以左右排布。

(treeWidth 表示的是整个tree 容器的宽度,要是需要留有间隙,可以减去 10 或者 20 像素)

加了以后则可以全行高亮了

缺点:

min-width 在某些条件下会显得多余,例如:

 

 此时只需要tree根据弹窗自动铺满就好了,不用考虑min-width。

当然这个解决起来也不复杂,通过js计算一下父容器的宽度就好了

mounted () {this.treeWidth = this.$refs['easy-tree']?.$el.offsetWidth - 15
},

第二天的ps: 

好像不用js计算,min-width: 100% 就可以搞定了~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/58859.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现 Trie (前缀树)

题目链接 实现 Trie (前缀树) 题目描述 注意点 word 和 prefix 仅由小写英文字母组成 解答思路 首先要理解前缀树是什么,参照该篇文章【图解算法】模板变式——带你彻底搞懂字典树(Trie树)在了解前缀树是什么后,设计前缀树就会更加容易,…

ZLMediaKit 各种推拉流

1 用ffmpeg 推音视频流 ./ffmpeg -f dshow -i video"HP Wide Vision HD Camera" -f dshow -i audio"麦克风阵列 (Realtek High Definition Audio)" -rtbufsize 100M -max_delay 100 -pix_fmt yuv420p -tune zerolatency -c:v libx264 -crf 18 -s 1280x720…

解决centos离线安装cmake找不到OpenSSL问题

安装方法:见另外一篇文章 https://blog.csdn.net/zhongxj183/article/details/118488629 按照文章下载了离线gcc 和OpenSSL,以及在cmake官网下载了最新版 cmake-3.27.4.tar.gz 顺利安装gcc 和OpenSSL 但执行编译cmake时,报错找不到OpenSSL…

11. 盛最多水的容器(c++题解)

11. 盛最多水的容器(c题解) 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大…

Python2022年03月Python二级 -- 编程题解析

Python软件编程等级考试二级——20220319 实操 第一题 实现统计字符串中的单词和单词出现的次数: 要求如下: (1)统计的语句为:to be or not to be that is a question (2)要求统计该句中出现…

linux打开端口命令是什么

linux打开端口命令是什么 linux开启端口的命令是 1 firewall-cmd --zonepublic --add-port端口/通讯协议 --permanent 需要注意的是,我们在开启指定端口后需要重启防火墙。 示例如下: 1、开启防火墙 1 systemctl start firewalld 2、开放指定端…

leetcode刷题(字符串相加、包含每个查询的最小区间、模拟行走机器人、环形子数组的最大和、满足不等式的最大值、四数之和、树中距离之和)

目录 1、字符串相加 2、包含每个查询的最小区间 3、模拟行走机器人 4、环形子数组的最大和 5、满足不等式的最大值 6、四数之和 7、 树中距离之和 1、字符串相加 class Solution:def addStrings(self, num1: str, num2: str) -> str:i len(num1) - 1 # num1的末…

APP UI自动化测试思路总结

首先想要说明一下,APP自动化测试可能很多公司不用,但也是大部分自动化测试工程师、高级测试工程师岗位招聘信息上要求的,所以为了更好的待遇,我们还是需要花时间去掌握的,毕竟谁也不会跟钱过不去。接下来,一…

【HDFS】ResponseProcessor线程详解以及客户端backoff反压

ResponseProcessor如何处理datanode侧发过来的packet ack的客户端侧backoff逻辑。ResponseProcessor:主要功能是处理来自datanode的响应。当一个packet的响应到达时,会把这个packet从ackQueue里移除。 @Overridepublic void run() {// 设置 ResponseProcessor 线程的名字setN…

VBA技术资料MF48:VBA_在Excel中将列号与字母转换

【分享成果,随喜正能量】除非自己的认知获得了改变和刷新,否则,人们常说的“顺应自己的内心”,顺的不过是一颗旧心,一颗惯性的,充满了各种习性的套路之心。与“顺应自己的内心”恰恰相反,人要用…

vue2 支持图片放大

添加 :preview-src-list属性 <el-imagev-for"item in specialData.urls":src"item":key"item.index":preview-src-list[item]class"pictrue"/>

AMEYA360:兆易创新获得ISO 26262 ASIL D流程认证, 汽车功能安全管理体系再上新台阶

中国北京(2023年8月29日) —— 业界半导体器件供应商兆易创新GigaDevice(股票代码 603986)今日宣布&#xff0c;获得由国际公认的测试、检验和认证机构通标标准技术服务有限公司(以下简称SGS)授予的ISO 26262:2018汽车功能安全最高等级ASIL D流程认证证书&#xff0c;这标志着兆…

python matlab 画柱状图

函数&#xff1a; bar(x, height, width0.8, bottomNone, *, aligncenter,dataNone, **kwargs) 设置坐标的刻度(ticks)&#xff0c;轴的标签和标题 在数据分析的很多时候&#xff0c;我们各个柱下面通常不是x刻度值&#xff0c;而是有实际意义的字符串&#xff0c;那么这个时…

yolov8使用C++推理的流程及注意事项

1.下载yolov8项目源码GitHub - ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > OpenVINO > CoreML > TFLite 2.下载opencvReleases - OpenCV,建议版本>4.7.0,选择下载源码&#xff0c; windows版本由于使用的编译器与我们所使用的m…

B - 负环

题目描述 给定一个 n 个点的有向图&#xff0c;请求出图中是否存在从顶点 11 出发能到达的负环。 负环的定义是&#xff1a;一条边权之和为负数的回路。 输入格式 本题单测试点有多组测试数据。 输入的第一行是一个整数 T&#xff0c;表示测试数据的组数。对于每组数据的格…

Nginx到底是什么,他能干什么?

Ngnix是什么&#xff0c;它是用来做什么的呢&#xff1f; 一。Nginx简介 Nginx是enginex的简写&#xff0c;是一款很优秀的开源的高性能HTTP和反向代理服务器,由于它是用C语言写的&#xff0c;所以速度非常快&#xff0c;性能非常优秀&#xff0c;它主要功能就是反向代理&…

FlinkSql 如何实现数据去重?

摘要 很多时候flink消费上游kafka的数据是有重复的&#xff0c;因此有时候我们想数据在落盘之前进行去重&#xff0c;这在实际开发中具有广泛的应用场景&#xff0c;此处不说详细代码&#xff0c;只粘贴相应的flinksql 代码 --********************************************…

SpringBoot Mybatis 多数据源 MySQL+Oracle+Redis

一、背景 在SpringBoot Mybatis 项目中&#xff0c;需要连接 多个数据源&#xff0c;连接多个数据库&#xff0c;需要连接一个MySQL数据库和一个Oracle数据库和一个Redis 二、依赖 pom.xml <dependencies><dependency><groupId>org.springframework.boot&l…

Tortoise Git(乌龟git)常用命令总结

查看全局和本地 Git 配置 打开命令行终端&#xff08;如 Git Bash&#xff09;&#xff0c;分别执行以下命令查看全局和本地的 Git 配置信息&#xff1a; git config --global -l git config --local -l确保配置中没有任何与 SSH 相关的设置 移除全局和本地 SSH 相关配置&…

权限校验中的“双token”方案

1. 双Token中的两个token分别是什么&#xff1f; 1.1 access_token 1.2 fresh_token 2. 为什么需要双token&#xff1f;一个token不行吗&#xff1f; 答&#xff1a; 两个token的职责不同。其中&#xff0c;access_token是在每次请求的时候携带给后端进行权限校验&#xff…