el-tree组件的锚点链接

el-tree部分:

<el-tree:default-expand-all="true":data="anchorList":props="defaultProps"@node-click="handleNodeClick"/>

组件内部部分:

<div class="header" :id="'content' + obj.id"><div class="title1">{{ toChineseNumber(obj.sort) }}. {{ obj.title }}一级</div><div><el-button size="small" @click="up(obj)"><el-icon :size="16"><ArrowUp /></el-icon></el-button><el-button size="small"><el-icon :size="16"><ArrowDown /></el-icon></el-button><el-button size="small"><el-icon :size="16"><Delete /></el-icon></el-button>

js部分: 

const handleNodeClick = (data) => {parent = document.querySelector("#content" + data.id);parent?.scrollIntoView({ behavior: "smooth" });
};

 这样的话点击el-tree的时候,所绑定的div就自动移动到顶部了

scrollIntoView({ behavior: "smooth" });

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

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

相关文章

界面控件Telerik UI for WPF——Windows 11主题精简模式提升应用体验

Telerik UI for WPF拥有超过100个控件来创建美观、高性能的桌面应用程序&#xff0c;同时还能快速构建企业级办公WPF应用程序。Telerik UI for WPF支持MVVM、触摸等&#xff0c;创建的应用程序可靠且结构良好&#xff0c;非常容易维护&#xff0c;其直观的API将无缝地集成Visua…

Qt Creator 创建 Qt 默认窗口程序

Qt 入门实战教程&#xff08;目录&#xff09; Windows Qt 5.12.10下载与安装 使用Qt Creator 本文介绍用Qt自带的集成开发工具Qt Creator创建Qt默认的窗口程序。 本文不需要你另外安装Visual Studio 2022这样的集成开发环境&#xff0c;也不需要你再在Visual Studio 2022中…

43、基于 springboot 自动配置的 spring mvc 错误处理,就是演示项目报错后,跳转到自定义的错误页面

Spring MVC 的错误处理&#xff1a;基于 SpringBoot 自动配置之后的 Spring MVC 错误处理。 就是访问方法时出错&#xff0c;然后弄个自定义的错误页面进行显示。 ★ 两种错误处理方式 方式一&#xff1a; 基于Spring Boot自动配置的错误处理方式&#xff0c;只要通过属性文件…

Redis-监听过期key-JAVA实现方案

一、创建监听配置类 RedisListenerConfig。 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.connection.RedisConnectionFactory; import org.springframework.d…

2022年06月 C/C++(七级)真题解析#中国电子学会#全国青少年软件编程等级考试

C/C编程&#xff08;1~8级&#xff09;全部真题・点这里 第1题&#xff1a;有多少种二叉树 输入n(1<n<13)&#xff0c;求n个结点的二叉树有多少种形态 时间限制&#xff1a;1000 内存限制&#xff1a;65536 输入 整数n 输出 答案 样例输入 3 样例输出 5 这个问题可以使用…

IDEA复制一个工程为多个并启动,测试负载均衡

1 找到服务按钮 2 选择复制配置 3 更改新的名称与虚拟机参数 复制下面的代码在VM参数中 -Dserver.port8082 4 最后启动即可

Vue框架--Vue中el和data的两种写法

data与el的2种写法 1.el有2种写法 (1).new Vue时候配置el属性。 (2).先创建Vue实例&#xff0c;随后再通过vm.$mount(#root)指定el的值。 2.data有2种写法 (1).对象式 (2).函数式 如何选择&#xff1a;目前哪种写法都可以&#xff0c;以后学习到组件时&#xff…

解决 filezilla 连接服务器失败问题

问题描述&#xff1a; 开始一直用的 XFTP 后来&#xff0c;它变成收费软件了&#xff0c;所以使用filezilla 代替 XFTP 之前用的还好好的&#xff0c;今天突然就报错了&#xff1a;按要求输入相关字段&#xff0c;连接 连接失败&#xff01;&#xff01;&#xff01;o(╥﹏╥…

预推免,保研------长安大学保内,附加分面试准备【记录帖】

&#x1f680;长安大学——人工智能系——程惠泽 &#x1f68c;前六学期专业排名&#xff1a;7/82 &#x1f68c;信息门户GPA&#xff1a;3.94 &#x1f68c;平均成绩&#xff1a;89.83 &#x1f68c;加权成绩&#xff1a;89.15 / ☁️本人比较菜&#xff0c;只能保研本校&…

Aqs的CyclicBarrier。

今天我们来学习AQS家族的“外门弟子”&#xff1a;CyclicBarrier。 为什么说CyclicBarrier是AQS家族的“外门弟子”呢&#xff1f;那是因为CyclicBarrier自身和内部类Generation并没有继承AQS&#xff0c;但在源码的实现中却深度依赖AQS家族的成员ReentrantLock。就像修仙小说…

C++实现蜂群涌现效果(flocking)

Flocking算法0704_元宇宙中的程序员的博客-CSDN博客 每个个体的位置&#xff0c;通过计算与周围个体的速度、角度、位置&#xff0c;去更新位置。

【Seata】00 - Seata Server 部署(Windows、Docker 基于 Jpom)

文章目录 前言参考目录版本说明Windows 部署 seata-server1&#xff1a;下载压缩包2&#xff1a;文件存储模式3&#xff1a;db 存储模式3.1&#xff1a;建表3.2&#xff1a;修改配置文件3.3&#xff1a;启动脚本4&#xff1a;源码部署 Docker 部署 seata-server &#xff08;基…

Java学习之序列化

1、引言 《手册》第 9 页 “OOP 规约” 部分有一段关于序列化的约定 1&#xff1a; 【强制】当序列化类新增属性时&#xff0c;请不要修改 serialVersionUID 字段&#xff0c;以避免反序列失败&#xff1b;如果完全不兼容升级&#xff0c;避免反序列化混乱&#xff0c;那么请…

引用(个人学习笔记黑马学习)

1、引用的基本语法 #include <iostream> using namespace std;int main() {int a 10;//创建引用int& b a;cout << "a " << a << endl;cout << "b " << b << endl;b 100;cout << "a "…

JVM 是怎么设计来保证new对象的线程安全

1、采用 CAS 分配重试的方式来保证更新操作的原子性 2、每个线程在 Java 堆中预先分配一小块内存&#xff0c;也就是本地线程分配缓冲&#xff08;Thread Local AllocationBuffer&#xff0c;TLAB&#xff09;&#xff0c;要分配内存的线程&#xff0c;先在本地缓冲区中分配&a…

LeetCode494. 目标和

494. 目标和 文章目录 [494. 目标和](https://leetcode.cn/problems/target-sum/)一、题目二、题解方法一&#xff1a;目标和路径计数算法方法二&#xff1a;01背包方法三&#xff1a;01背包一维数组 一、题目 给你一个非负整数数组 nums 和一个整数 target 。 向数组中的每个…

外部中断(EXTI) - 按键控制LED

一、外部中断/事件控制器(EXTI)结构图 1、结构图分析 外部中断主要由外部中断/事件控制器(External interrupt/event controller, EXTI)控制&#xff0c;它管理了外部中断或者事件的使能与否、触发方式等功能。 &#xff08; 外部中断/事件控制器(EXTI)结构图 &#xff09; …

【5】openGL使用宏和函数进行错误检测

当我们编写openGL程序&#xff0c;没有报编译链接错误&#xff0c;但是运行结果是黑屏&#xff0c;这不是我们想要的。 openGL提供了glGetError 来检查错误&#xff0c;我们可以通过在运行时进行打断点查看glGetError返回值&#xff0c;得到的是一个十进制数&#xff0c;将其转…

Nacos服务注册和服务配置

Nacos 是什么 Nacos (Dynamic Naming and Configuration Service)&#xff0c;其命名由三部分组成&#xff1a; Na (naming/nameServer)&#xff0c;即服务注册中心。 co (configuration)&#xff0c;即配置中心。 s (service)&#xff0c;即服务&#xff0c;表示 Nacos 实现的…

华为 连接OSPF和RIP网络---OSPF和RIP网络相互引入

路由引入简介 不同路由协议之间不能直接共享各自的路由信息&#xff0c;需要依靠配置路由的引入来实现。 获得路由信息一般有3种途径&#xff1a;直连网段、静态配置和路由协议。可以将通过这3种途径获得的路由信息引入到路由协议中&#xff0c;例如&#xff0c;把直连网段引入…