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.mzph.cn/news/783280.shtml

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

相关文章

【JDK常用的API】包装类

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

【IDEA】安装教程

目录 一、安装IDEA 二、激活IDEA 总结 一、安装IDEA 点击idea安装包->点击next->选择安装的路径->勾选创建桌面的快捷方式->勾选将bin目录添加到环境变量->勾选文件夹当做项目工程 打开下面这四个不勾选&#xff0c;勾选表示打开文件将以下面的格式打开 安装…

Python绘制线图之plt.plot()的介绍以及使用

在Python中plt.plot是matplotlib库中的一个函数,用于绘制点和线,并对其样式进行控制,下面这篇文章主要给大家介绍了关于Python绘制线图之plt.plot()的介绍以及使用的相关资料,需要的朋友可以参考下 plt.plot() 是Matplotlib库中用于绘制线图&#xff08;折线图&#xff09;的主…

YOLOv9改进策略 :主干篇 | 南开大学提出LSKNet,遥感旋转目标检测新SOTA ,ICCV 2023

💡💡💡本文改进内容: 动态调整特征提取骨干的感受野,以便更有效地处理被检测大小物体的不同的检测能力,也就是说可以有效提升检测数据集当中存在大小目标的检测能力 改进结构图如下: 《YOLOv9魔术师专栏》将从以下各个方向进行创新: 【原创自研模块】【多组合点优…

OpenEuler华为欧拉系统安装教程及联网配置

OpenEuler简介 openEuler是一款开源操作系统。当前openEuler内核源于Linux&#xff0c;支持鲲鹏及其它多种处理器&#xff0c;能够充分释放计算芯片的潜能&#xff0c;是由全球开源贡献者构建的高效、稳定、安全的开源操作系统&#xff0c;适用于数据库、大数据、云计算、人工智…

java入门学习Day01

本篇文章主要是学会如何使用IDEA&#xff0c;和运行第一个java文件。 java环境安装&#xff1a;Windows下Java环境配置教程_windows java环境配置-CSDN博客 IDEA安装&#xff1a;IDEA 2023.2.5 最新激活码,注册码&#xff08;亲测好用&#xff09; - 异常教程 以上两个链接…

安装VS2022社区版

Visual Studio 2022 平台的使用 1.Visual Studio 的下载地址&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/ 2.安装步骤简要记录 耐心等待安装完成 参考链接&#xff1a;Visual Studio 2022安装教程(非常详细)&#xff0c;从零基础入门到精通&…

Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程)

前言 登录功能&#xff0c;是我们几乎开发每个系统都必须的模块。 登录功能设计思路&#xff0c;主要包括几个方面。 用户输入网址展示登录页面用户输入用户名&#xff0c;密码等点击登录进行信息校验校验通过之后&#xff0c;记录用户登录信息&#xff0c;跳转指定页面用户校…

EI期刊和EI会议有哪些不同?别再傻傻分不清

EI工程索引是综合性检索机构&#xff0c;是三个著名学术检索系统之一&#xff0c;EI工程索引也分为EI期刊和EI会议&#xff0c;那么两者有哪些不同&#xff1f;作者又该如何选&#xff1f;本文系统分享一下相关的知识&#xff0c;仅供学术人员参考&#xff1a; 第一、文章质量不…

RCG自条件是如何添加到 Pixel Generator上的?

在自条件的训练过程中&#xff0c;需要将图像经过Pretrained encoder的表征Rep输入进已有的Pixel Generator上&#xff0c;目前RCG是向四种Pixel Generator上加入了自条件&#xff0c;关于它是如何将rep加到Pixel Generator上的&#xff0c;我来总结一下&#xff1a; 一、Pixel…

【前端Vue】Vue从0基础完整教程第4篇:面经PC端 - Element (下)【附代码文档】

Vue从0基础到大神学习完整教程完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;vue基本概念&#xff0c;vue-cli的使用&#xff0c;vue的插值表达式&#xff0c;{{ gaga }}&#xff0c;{{ if (obj.age > 18 ) { } }}&#xff0c;vue指令&#xff0c;综合…

树的重心——树的结构

树的重心是指对于某个点&#xff0c;将其删除后&#xff0c;可以使得剩余联通块的最大值最小。也就等价于一某个点为根的树&#xff0c;将根删除后&#xff0c;剩余的若干棵子树的大小最小。 例如下图的树的重心就是2。 性质&#xff1a; 性质一&#xff1a;重心的若干棵子树打…

Vue使用el-statistic和el-card显示大屏中的统计数据

​ 一、页面内容&#xff1a; <el-row :gutter"20"><el-col :span"6"><el-card class"box-card"><div><el-statisticgroup-separator",":precision"2":value"value2":title"tit…

【娱乐】战双帕弥什游戏笔记攻略

文章目录 Part.I IntroductionChap.I Information Part.II 新手攻略Chap.I 角色和武器挑选Chap.II 新手意识推荐 Part.II 阵容搭配Chap.I 一拖二Chap.II 毕业队 Reference Part.I Introduction 2019年12月5日全平台公测。 偶然间入坑战双&#xff0c;玩了几天&#xff0c;觉得…

elasticsearch基础应用

1._cat接口 | _cat接口 | 说明 | | GET /_cat/nodes | 查看所有节点 | | GET /_cat/health | 查看ES健康状况 | | GET /_cat/master | 查看主节点 | | GET /_cat/indices | 查看所有索引信息 | es 中会默认提供上面的几个索引&#xff0c;表头…

Hotspot虚拟机对象问题(对象头...对象创建)

目录 对象头 实例数据 对齐填充 对象是如何创建 对象头 在Hotspot虚拟机中&#xff0c;Java对象在内存中的布局大致可以分为三部分:对象头、实例数据和填充对齐。因为synchronized用的锁是存在对象头里的&#xff0c;这里我们需要重点了解对象头。如果对象头是数组类型则对…

springboot汉服推广网站

摘 要 本论文主要论述了如何使用JAVA语言开发一个汉服推广网站 &#xff0c;本系统将严格按照软件开发流程进行各个阶段的工作&#xff0c;采用B/S架构&#xff0c;面向对象编程思想进行项目开发。在引言中&#xff0c;作者将论述汉服推广网站的当前背景以及系统开发的目的&am…

创建第一个Electron程序

前置准备 创建一个文件夹&#xff0c;如: electest进入文件夹&#xff0c;初始化npm npm init -y 安装electron依赖包 注&#xff0c;这里使用npm i -D electron会特别卡&#xff0c;哪怕换成淘宝源也不行。可以使用下面方式安装。 首先&#xff0c;安装yarn npm i -g yarn 随…

从打开电视的过程认识接口(Java)

目录 问题引入 接口 什么是接口 接口的特点 简单理解接口 接口的实现 TV接口及其实现 Controlor接口及其实现 注意 情景实现 代码 输出 问题引入 在面向对象的世界里&#xff0c;不妨设想&#xff0c;我们打开电视需要些什么呢&#xff1f;显然的&#xff0c;首…

Leetcode刷题记录面试基础题day1(备战秋招)

hello&#xff0c;你好鸭&#xff0c;我是康康&#xff0c;很高兴你能来阅读&#xff0c;昵称是希望自己能不断精进&#xff0c;向着优秀程序员前行!&#x1f4aa;&#x1f4aa;&#x1f4aa; 目前博客主要更新Java系列、数据库、项目案例、计算机基础等知识点。感谢你的阅读和…