如何定位el-tree中的树节点当父元素滚动时如何定位子元素

使用到的方法

Element 接口的 scrollIntoView() 方法会滚动元素的父容器,使被调用 scrollIntoView() 的元素对用户可见。
参数
alignToTop可选
一个布尔值:
如果为 true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
如果为 false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的 scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
scrollIntoViewOptions 可选 实验性
一个包含下列属性的对象:
behavior 可选
定义滚动是立即的还是平滑的动画。该选项是一个字符串,必须采用以下值之一:
smooth:滚动应该是平滑的动画。
instant:滚动应该通过一次跳跃立刻发生。
auto:滚动行为由 scroll-behavior 的计算值决定。
block 可选
定义垂直方向的对齐,start、center、end 或 nearest 之一。默认为 start。
inline 可选
定义水平方向的对齐,start、center、end 或 nearest 之一。默认为 nearest。

详细参考mdn传送门

测试效果图

点击按钮快速定位到子节点
在这里插入图片描述

测试代码

<!-- eslint-disable eqeqeq -->
<!-- eslint-disable no-undef -->
<template><div><div style="width: 200px;height: 200px;overflow: auto;"><el-tree :data="data" node-key="id" default-expand-all :props="defaultProps"><span slot-scope="{ node, data }"><span :id="data.id">{{ node.label }}</span></span></el-tree></div><el-button type="primary" style="margin-top: 100px;" @click="handleClick">主要按钮</el-button></div>
</template>
<script>
export default {data() {return {data: [{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'}]}, {id: 4,label: '一级 4',children: [{id: 9,label: '二级 4-1'}, {id: 10,label: '二级 4-2'}]}, {id: 5,label: '一级 5',children: [{id: 11,label: '二级 5-1'}, {id: 12,label: '二级 5-2'}]}],defaultProps: {children: 'children',label: 'label'}}},async mounted() {},methods: {handleClick(){let node = document.getElementById('10')this.$nextTick(()=>{node.scrollIntoView()})}},}
</script><style lang="scss" scoped></style>

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

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

相关文章

算法学习 day26

第二十六天 最大子数组和 53. 最大子数组和 - 力扣&#xff08;LeetCode&#xff09; 动态规划问题 class Solution {public int maxSubArray(int[] nums) {int len nums.length;int[] dp new int[len];dp[0] nums[0];int res dp[0];for(int i 1; i < len; i){dp[i] …

Docker 可视化面板 ——Portainer

Portainer 是一个非常好用的 Docker 可视化面板&#xff0c;可以让你轻松地管理你的 Docker 容器。 官网&#xff1a;Portainer: Container Management Software for Kubernetes and Docker 【Docker系列】超级好用的Docker可视化工具——Portainer_哔哩哔哩_bilibili 环境 …

OpenCV C++ 图像 批处理 (批量调整尺寸、批量重命名)

文章目录 图像 批处理(调整尺寸、重命名)图像 批处理(调整尺寸、重命名) 拿着棋盘格,对着相机变换不同的方角度,采集十张以上(以10~20张为宜);或者棋盘格放到桌上,拿着相机从不同角度一通拍摄。 以棋盘格,第一个内焦点为坐标原点,便于计算世界坐标系下三维坐标; …

远程文件包含演示

远程文件包含 基本介绍 受害机器 10.9.47.181 攻击者机器1 10.9.47.41 攻击者机器2 10.9.47.217 实现过程 受害者机器开启phpstudy 并且开启允许远程连接 攻击者机器1上有一个文件&#xff0c;内容是phpinfo(); 攻击者机器1提供web服务使得受害者机器能够访问到攻击者…

庖丁解牛:NIO核心概念与机制详解 02 _ 缓冲区的细节实现

文章目录 PreOverview状态变量概述PositionLimitCapacity演示&#xff1a; 观察变量 访问方法get() 方法put()方法类型化的 get() 和 put() 方法 缓冲区的使用&#xff1a;一个内部循环 Pre 庖丁解牛&#xff1a;NIO核心概念与机制详解 01 接下来我们来看下缓冲区内部细节 Ov…

IPO解读丨高处不胜寒,澜沧古茶低头取暖?

自A股注册制改革不断深化并全面落地后&#xff0c;不少意欲登陆资本市场的企业转战港股。这个过程中&#xff0c;诞生了很多以“港股”为前缀的“第一股”——“白酒第一股”珍酒李渡、“水果零售第一股”百果园、“智能驾驶第一股”知行汽车、“运动科技第一股”Keep…… 由A…

力扣刷题-二叉树-完全二叉树的节点个数

222.完全二叉树的节点个数 给出一个完全二叉树&#xff0c;求出该树的节点个数。 示例 1&#xff1a; 输入&#xff1a;root [1,2,3,4,5,6] 输出&#xff1a;6 示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;0 示例 3&#xff1a; 输入&#xff1a;root [1]…

springMvc中的拦截器【巩固】

先实现下想要的拦截器功能 package com.hmdp.utils;import com.hmdp.entity.User; import org.springframework.web.servlet.HandlerInterceptor;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.Ht…

Pandas get_dummies用法

get_dummies 是 pandas 实现one hot encode的方式 ​  one-hot的基本思想&#xff1a;将离散型特征的每一种特征取值都看成一种状态&#xff0c;若指定离散特征中有N个 不相同的取值&#xff0c;那么我们就可以将该特征抽象成N种不同的状态&#xff0c;one-hot编码保证了每一…

10 Redis的持久化

Redis支持RDB和AOF两种持久化机制 1、RDB(Redis DataBase) 是对命令的全量快照随着key的数量增大&#xff0c;那么写入磁盘的开销也会越来越大 2、RDB文件的生成是否会阻塞主线程 save: 使用save的方式会阻塞主线程&#xff0c;影响redis的性能 bgsave: 一般情况下不会阻塞…

C语言模拟实现Liunx操作系统与用户之间的桥梁shell(代码详解)

什么是shell&#xff1f; Shell&#xff08;壳&#xff09;是指命令行界面&#xff08;CLI&#xff09;或脚本语言&#xff0c;它为用户提供了与操作系统交互的方式。它是一个程序&#xff0c;从用户那里接收命令&#xff0c;并通过与操作系统内核交互来执行这些命令。Shell充当…

CTFHub Git泄露

Log 前言 根据题目描述&#xff0c;这个题目需要使用到工具 GitHack 来完成&#xff0c;而 CTFHub 上提供的工具需要在 python2 环境中执行&#xff0c;注意 python3 环境无法使用。 GitHack准备&#xff08;kali Linux&#xff09; 打开虚拟机 sudo su 以管理员的身份运行…

开源更安全? yum源配置/rpm 什么是SSH?

文章目录 1.开放源码有利于系统安全2.yum源配置&#xff0c;这一篇就够了&#xff01;(包括本地&#xff0c;网络&#xff0c;本地共享yum源)3.rpm包是什么4.SSH是什么意思&#xff1f;有什么功能&#xff1f; 1.开放源码有利于系统安全 开放源码有利于系统安全 2.yum源配置…

Java 11及更高版本的Oracle JDK版本

2021 年 9 月 14 日&#xff0c;Oracle 发布了可以长期支持的 JDK17 版本&#xff0c;那么从 JDK11 到 JDK17&#xff0c;到底带来了哪些特性呢&#xff1f;亚毫秒级的 ZGC 效果到底怎么样呢&#xff1f;值得我们升级吗&#xff1f;而且升级过程会遇到哪些问题呢&#xff1f;带…

【Spring boot】RedisTemplate中String、Hash、List设置过期时间

文章目录 前言Redis中String设置时间的方法Redis中Hash和List设置时间的方法Redis中Hash的put、putAll、putIfAbsent区别 前言 时间类型&#xff1a;TimeUnit import java.util.concurrent.TimeUnit;TimeUnit.SECONDS:秒 TimeUnit.MINUTES&#xff1a;分 TimeUnit.HOURS&…

Javaweb之Ajax的详细解析

1.1 Ajax介绍 1.1.1 Ajax概述 我们前端页面中的数据&#xff0c;如下图所示的表格中的学生信息&#xff0c;应该来自于后台&#xff0c;那么我们的后台和前端是互不影响的2个程序&#xff0c;那么我们前端应该如何从后台获取数据呢&#xff1f;因为是2个程序&#xff0c;所以…

“移动机器人课程群实践创新的困境与突围”素材

以下是一篇应用型本科教研论文“移动机器人课程群实践创新的困境与突围”的大纲。您可以根据这个大纲展开您的论文写作&#xff1a; 一、引言 移动机器人技术的发展和应用价值移动机器人课程群在应用型本科教育中的重要性论文目的和研究问题&#xff1a;解析移动机器人课程群实…

利用OpenCV做个熊猫表情包 二

之前写了一篇 利用OpenCV做个熊猫表情包吧_Leen的博客-CSDN博客 回想起来觉得有点太弱了&#xff0c;意犹未尽&#xff0c;每次使用需要自己去手动截取人脸&#xff0c;清除黑边什么的才能使用demo去合成表情&#xff0c;无奈之前由于安装的vs&#xff0c;opencv版本都比较低…

扩散模型实战(十):Stable Diffusion文本条件生成图像大模型

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型实战&#xff08;二&#xff09;&#xff1a;扩散模型的发展 扩散模型实战&#xff08;三&#xff09;&#xff1a;扩散模型的应用 扩散模型实战&#xff08;四&#xff…

【推荐】智元兔AI:一款集写作、问答、绘画于一体的全能工具!

在当今技术飞速发展的时代&#xff0c;越来越多的领域开始应用人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;。其中&#xff0c;AI写作工具备受瞩目&#xff0c;备受推崇。在众多的选择中&#xff0c;智元兔AI是一款在笔者使用过程中非常有帮助的…