elementui tree 支持虚拟滚动和treeLine (上)

news2024/12/25 0:23:29

背景:在使用elementui+vue2.x进行项目开发时,有用到el-tree组件,但是在数据很多时会卡顿

基于以上背景elementui 提供的el-tree组件无法满足需求。

期间在网上调研了很多相关的tree组件,例如:

  • vue-trees
  • zTrees
  • jsTrees

发现以上组件,要么无法支持虚拟滚动。要么是api不够完善,定制化功能不强。

最终在查阅相关资料时,发现github有一个大佬使用vue-virtual-scroller自己写了一个elementui tree的扩展组件

链接: vue-easy-tree

同时这款组件还能完美的继承elementui tree上的属性和方法,算是过渡最为平滑的组件了。

需求变更:虽然虚拟滚动实现了,但是在演示的时候领导觉得,还是加个treeLine 更好看

所谓的treeLine 就是tree展开时,侧边那一条条带有结构性质的边线。也就是:

在这里插入图片描述
但是 vue-easy-tree 是不提供类似属性的。

没办法,对比再三还是决定从vue-easy-tree的源码上进行调整,毕竟业务代码已经写了那么多了。

所以我们的解决方案就是 在vue-easy-tree 的基础上进行二次调整,后面再发布我们自己的npm包,重新引入后,就不用去动其他的代码了。

相关代码我本地已经修改,并提交了pull 请求

在这里插入图片描述
有兴趣的可以去看看,这里我是参考了 ant-design-vue 的dom。

把动态的 width=18,36,54px ,改为固定宽度为18 的多个span标签

在这里插入图片描述
最后得到的结果如下:

在这里插入图片描述
确认这个ui就是我们要的,下一步就是发布到npm了。

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

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

相关文章

d3dcompiler_47.dll缺失怎么修复,总结五个修复方法

d3dcompiler_47.dll是一个由微软公司开发的动态链接库文件(DLL File),属于Microsoft Direct3D Shader Compiler 库的一部分,该库包含用于编写和编译 Direct3D 11 的着色器的编译器源代码。这个 DLL 文件是 Direct3D 11 中非常重要的组成部分,…

什么是微软的 Application Framework?

我是荔园微风,作为一名在IT界整整25年的老兵,今天来看一下什么是微软的 Application Framework? 到底什么是 Application Framework? 还没有真正掌握任何一套Application Framework的使用之前,就来研究这个真的不是很…

海龟绘图turtle库之二级基础编程题

海龟绘图turtle库之二级基础编程题 python2.6版本中后引入的一个简单的绘图工具,叫做海龟绘图(Turtle Graphics),turtle库是python的内部库,使用导入即可 import turtle 原理: Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个…

HTML(结构)+CSS(样式基础)

一、HTML前期准备 1. 认识HTML HTML(Hyper Text Markup Language):超文本标记语言主要通过标签对网页中的文本、图片、音频、视频等内容进行描述个人理解:对所有需要描述的内容使用标签进行表示 2. HTML布置页面的固定结构 每一个…

APP UI自动化测试,思路全总结在这里了

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

Windows上不可或缺的5款宝藏软件,工作效率拉满!

职场小白与大牛的区别:小白需要耗费大半天琢磨的事情,而大牛可以只花5分钟就能处理。 “牛人”,即拥有过人之处,专业、经验、技术等等,学会灵活运用高效率的工具也是关键的一点。工具找得好,运用得快&#…

轴承故障诊断(一维时序信息结合二维图像实现故障诊断,python编程,十分类)

1.模型介绍: 2.数据集介绍(凯斯西楚大学数据集,实现对12k采集频率下四种负载的诊断,同时也实现对48k采集频率下数据的诊断):十分类 0文件夹装的是0HP下原始的数据(包含十种故障)&…

【深入理解Linux内核锁】二、中断屏蔽

我的圈子: 高级工程师聚集地 我是董哥,高级嵌入式软件开发工程师,从事嵌入式Linux驱动开发和系统开发,曾就职于世界500强公司! 创作理念:专注分享高质量嵌入式文章,让大家读有所得! …

JMM如何实现volatile写/读的内存语义

内存屏障类型表 StoreLoad Barriers是一个“全能型”的屏障,它同时具有其他3个屏障的效果。现代的多处理器大多支持该屏障(其他类型的屏障不一定被所有处理器支持)。执行该屏障开销会很昂贵,因为当前处理器通常要把写缓冲区中的数…

移动端事件300ms延迟解决

有移动端与PC端的项目开发,那么移动端和PC端开发上是存在差异的,比如 click 事件的300ms 延迟,即移动Web页面上的click事件响应都要慢上300ms,移动设备访问Web页面时往往需要 “双击” 或者 “捏开” 来放大页面看清页面的具体内容…

TVP走进腾讯:直面变革浪潮,合力拥抱AI新时代

引言 自 ChatGPT 问世以来,以通用人工智能为代表的 AI 技术发展开始“狂飙”,多家企业和研究机构入局大模型赛道,新应用场景不断涌现。如何理解通用人工智能技术将带来的巨大影响,并把握随之而来的机遇和挑战,是我们面…

自己开发或者修改的组件包如何发布到npm官方市场

1、注册账号 打开npm官方网站: www.npmjs.com; 进行注册 注册需要用户名,密码和邮箱, 当注册完成后需打开邮箱进行验证(邮箱不验证无法上传) 二、 在需要打包发布的文件夹package.json所在目录下执行命令:…

Nacos架构与原理 - 通信通道

文章目录 Nacos 长链接⼀、现状背景二、场景分析1. 配置SDK 和 Server 之间Server 之间通信 2. 服务SDK 和 Server 之间Server 之间通信 三、长链接核心诉求1. 功能性诉求客户端服务端 2. 性能要求3. 负载均衡客户端随机服务端柔性调 4. 连接⽣命周期5. 安全性6. 低成本多语⾔实…

基于jsp+mysql+Spring+mybatis的SpringBoot美容院预约管理系统

运行环境: 最好是java jdk 1.8,我在这个平台上运行的。其他版本理论上也可以。 IDE环境: Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以,如果编译器的版本太低,需要升级下编译器,不要弄太低的版本 tomcat服务器环…

数据分析 × 人文社科:高校交叉学科教学经验分享

随着新一轮科技革命与产业变革的加速演进,学科间的交叉融合不断升级,由数据驱动的系列交叉学科备受瞩目,然而,在实际教学与学科建设的过程中,对于数据科学引入至相关学科,高校教师还是普遍面临着比较多的问…

MYSQL中的14个查询技巧

1.group_concat 在我们平常的工作中,使用group by进行分组的场景,是非常多的。 比如想统计出用户表中,名称不同的用户的具体名称有哪些? 具体sql如下: select name from `user` group by name; 但如果想把name相同的code拼接在一起,放到另外一列中该怎么办呢? 答:…

LeetCode - 16 最接近的三数之和

目录 题目来源 题目描述 示例 提示 题目解析 算法源码 题目来源 16. 最接近的三数之和 - 力扣(LeetCode) 题目描述 给你一个长度为 n 的整数数组 nums 和 一个目标值 target。 请你从 nums 中选出三个整数,使它们的和与 target 最接…

HNU-操作系统OS-作业2(15-22章)

OS_homework_2 这份文件是OS_homework_2 by计科210X wolf 202108010XXX 文档设置了目录,可以通过目录快速跳转至答案部分。 第15章 运行程序OS-homework/vm-mechanism/relocation.py 15.1 用种子 1、2 和 3 运行,并计算进程生成的每个虚拟地址是处于界限内还是界限外? 如…

Python + HDF5 因子计算与 DolphinDB 一体化因子计算方案对比

在量化交易中,基于金融市场的 L1/L2 的报价和交易高频数据来进行高频因子计算,是非常常见的投研需求。目前国内全市场十年的 L2 历史数据约为 20 ~ 50T,每日新增的数据量约为 10 ~ 20G。传统的关系数据库如 MS SQL Server 或 MySQL 已经很难支…

2023届【校招】安全面试题和岗位总结(字节、百度、腾讯、美团等大厂)

写在前面 个人强烈感觉面试因人而异,对于简历上有具体项目经历的同学,个人感觉面试官会着重让你介绍自己的项目,包括但不限于介绍一次真实攻防/渗透/挖洞/CTF/代码审计的经历 > 因此对于自己的项目,面试前建议做一次复盘&#…