Vue tree自定义滚动条位置

贴一张效果图,我的效果不方便贴出来

 实现支持:

1、懒加载

2、普通加载

下面贴关键思想:

document有一个获取element元素的方法。

let element = document.getElementById('tree');

let arr = document.querySelectorAll(".nodelModel");

上面是关键代码

for(var i = 0; i < arr.length; i++) {

        let item = arr[i];

         if(判断你选择的值和数组元素的值在什么位置){

                element.scrollTo(0,i * 你的预设高度); //第一个值是横行的,

        }

}

 如此,初始化加载可以实现。

由于网上很直接的方法,自己保留一个。

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

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

相关文章

51单片机实验01-点亮LED小灯

目录 一&#xff0c;软件下载 二&#xff0c;单片机概述 1&#xff0c;单片机内部资源 1&#xff09;flash 2&#xff09;ram 3&#xff09;sfr 2&#xff0c;51单片机 3&#xff0c;单片机最小系统 三&#xff0c;点亮最右边的小灯 1&#xff0c;指出满足小灯点亮的有…

VsCode配置c++环境(详细)

这里写目录标题 1. 下载 MinGW添加环境变量 2. 配置VsCode3. 下载插件4. 测试5. 注意事项 1. 下载 MinGW MinGW 是 Minimalistic GNU for Windows 的缩写&#xff0c;相当于win版的gcc。 到MinGW官网下载。 也可以使用迅雷白嫖笔者下载好的 MinGW from 迅雷 提取码&#xff1a…

Redis 的主从复制、哨兵

目录 一. Redis 主从复制 1. 介绍 2. 作用 3. 流程 4. 搭建 Redis 主从复制 安装redis 修改 master 的Redis配置文件 修改 slave 的Redis配置文件 验证主从效果 二. Redis 哨兵模式 1. 介绍 2. 原理 3. 哨兵模式的作用 4. 工作流程 4.1 故障转移机制 4.2 主节…

MySQL故障排查与优化

一、MySQL故障排查 1.1 故障现象与解决方法 1.1.1 故障1 1.1.2 故障2 1.1.3 故障3 1.1.4 故障4 1.1.5 故障5 1.1.6 故障6 1.1.7 故障7​ 1.1.8 故障8 1.1.9 MySQL 主从故障排查 二、MySQL优化 2.1 硬件方面 2.2 查询优化 一、MySQL故障排查 1.1 故障现象与解决方…

Linux是什么,该如何学习

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Linux的起源与发展 2、Linux在现代计算机领域…

vue 使用自定义标签URL Protocol 调用本地exe 并传参

创建注册表文件reg&#xff0c;并运行 里面的路径需要替换成实际exe的绝对路径 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\App] "URL:App Protocol Handler" "URL Protocol""" [HKEY_CLASSES_ROOT\App\DefaultIcon] &qu…

解决echarts xAxis设置type:‘value‘后 x轴有负值的时候 Y轴在0点显示

前提&#xff1a;xAxis设置type:‘value’ 数据&#xff1a;data里面含有负数值&#xff0c;导致Y坐标轴一直在 X&#xff08;0&#xff09;上面显示 解决方案&#xff1a; yAxis里面设置 axisLine: { onZero:false } yAxis:{type: value,name:测试,axisLine: { onZero:false …

理解main方法的语法

由于JVM需要调用类的main()方法&#xff0c;所以该方法的访问权限必须是public&#xff0c;又因为JVM在执行main()方法时不必创建对象&#xff0c;所以该方法必须是static的&#xff0c;该方法接收一个String类型的数组参数&#xff0c;该数组中保存执行Java命令时传递给所运行…

【贪玩巴斯】programmer程序员常用Mac指令

1. 如何获取文件地址&#xff1f; 方法&#xff08;常用&#xff09;&#xff1a;对于想要获取地址的文件&#xff0c;右键后&#xff0c;按option键&#xff08;空格左边的左边&#xff0c;command指令的左边那个键&#xff09;&#xff0c;就会出现‘将xx拷贝为路径名称’&a…

CentOS7安装MySQL8.0.28(持续)

第一步 &#xff1a;下载mysql MySQL https://www.mysql.com/

Windows10安装CloudCompare(图文安装)

CloudCompare是一个3D点云&#xff08;和三角网格&#xff09;处理软件。它最初被设计用于在两个密集的3D点云&#xff08;例如用激光扫描仪获取的点云&#xff09;之间或点云和三角形网格之间进行比较。它依赖于专用于此任务的特定八叉树结构。 之后&#xff0c;它已经扩展到一…

[计算机效率] 磁盘空间分析工具:FolderSize

3.15 磁盘空间分析工具&#xff1a;FolderSize FolderSize是一款磁盘管理工具&#xff0c;提供预约交互式磁盘空间分析体验&#xff0c;可以可视化观察磁盘空间使用情况。程序可以帮助用户快速查看并统计硬盘中的各个分区所占用的空间大小以及文件夹和文件的大小&#xff0c;并…