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.hqwc.cn/news/102797.html

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

相关文章

2023国赛数学建模A题思路分析 - 定日镜场的优化设计

# 1 赛题 A 题 定日镜场的优化设计 构建以新能源为主体的新型电力系统&#xff0c; 是我国实现“碳达峰”“碳中和”目标的一项重要 措施。塔式太阳能光热发电是一种低碳环保的新型清洁能源技术[1]。 定日镜是塔式太阳能光热发电站(以下简称塔式电站)收集太阳能的基本组件&…

基于亚马逊云科技打造的游戏AIGC专业版,创梦天地快速上线AI生图服务

生成式人工智能&#xff08;以下简称“生成式AI”&#xff09;的热潮正在全球范围内掀起新一轮的科技革命&#xff0c;释放出巨大的商业价值。各类“AI绘画神器”的涌现&#xff0c;为创意行业带来了翻天覆地的变化。 在游戏领域&#xff0c;生成式AI技术也吸引了玩家们的广泛关…

SAP-PP:基础概念笔记-5(物料主数据的工作计划视图)

文章目录 前言一、工作计划视图Production Supervisor 生产管理员生产计划参数文件序列号参数文件&#xff1a;序列化级批次管理批次管理工厂&#xff1a;需要批量记录&#xff1a;批量输入&#xff1a;不足交货允差 Underdelivery Tolerance&#xff1a;过度交货允差 Overdeli…

【电路参考】缓启动电路

一、外部供电直接上电可能导致的问题 1、在热拔插的过程中&#xff0c;两个连接器的机械接触&#xff0c;触点在瞬间会出现弹跳&#xff0c;电源不稳&#xff0c;发生震荡。这期间系统工作可能造成不稳定。 2、由于电路中存在滤波或大电解电容&#xff0c;在上电瞬间&#xff…

BMS电池管理系统——电芯需求数据(三)

BMS电池管理系统 文章目录 BMS电池管理系统前言一、有什么基础数据二、基础数据分析1.充放电的截至电压2.SOC-OCV关系表3.充放电电流限制表4.充放电容量特性5.自放电率 总结 前言 在新能源产业中电芯的开发也占有很大部分&#xff0c;下面我们就来看一下电芯的需求数据有哪些 …

web请求cookie中expires总结

用意 cookie 有失效日期 "expires"&#xff0c;如果还没有过失效期&#xff0c;即使重新启动电脑&#xff0c;cookie 仍然不会丢失 注意&#xff1a;如果没有指定 expires 值&#xff0c;那么在关闭浏览器时&#xff0c;cookie 即失效。 设置 如果cookie存储时间大…

Springboot 实践(14)spring config 配置与运用--手动刷新

前文讲解Spring Cloud zuul 实现了SpringbootAction-One和SpringbootAction-two两个项目的路由切换&#xff0c;正确访问到项目中的资源。这两个项目各自拥有一份application.yml项目配置文件&#xff0c;配置文件中有一部分相同的配置参数&#xff0c;如果涉及到修改&#xf…

Redis持久化、主从与哨兵架构详解

Redis持久化 RDB快照&#xff08;snapshot&#xff09; 在默认情况下&#xff0c; Redis 将内存数据库快照保存在名字为 dump.rdb 的二进制文件中。 你可以对 Redis 进行设置&#xff0c; 让它在“ N 秒内数据集至少有 M 个改动”这一条件被满足时&#xff0c; 自动保存一次数…

java.lang.Exception: No runnable methods

无可执行test方法异常&#xff0c;报错为&#xff1a; 1.查看是否添加了Test注解在执行的方法上 2.查看测试类的注解 3.查看test类的导包&#xff0c;一定要是junit的。

【爬虫】8.1. 使用OCR技术识别图形验证码

使用OCR技术识别图形验证码 文章目录 使用OCR技术识别图形验证码1. OCR技术2. 准备工作2.1. tesserocr安装异常 3. 验证码图片爬取4. 无障碍识别测试5. 错误识别6. 识别实战&#xff1a;7. 参数设置 图形验证码是最早出现的验证方式&#xff0c;现在依然很常见&#xff0c;一般…

【线程池】面试被问到线程池参数如何配置时该如何回答

前言 没有基于业务场景&#xff0c;直接抛出这个问题&#xff0c;等同于耍流氓。 八股文告诉我们CPU密集型就核心数1&#xff0c;IO密集型就核心数*2&#xff0c;那么真实业务中该怎么去配置呢。 方法论还是有的 1.需要分析线程池执行的任务的特性&#xff1a; CPU 密集型还是 …

【Node.js】Node.js安装详细步骤和创建Express项目演示

Node.js是一个开源的、跨平台的JavaScript运行环境&#xff0c;用于在服务器端运行JavaScript代码。它提供了一个简单的API&#xff0c;可以用于开发各种网络和服务器应用程序。 以下是Node.js的安装和使用的详细步骤和代码示例&#xff1a; 1、下载Node.js 访问Node.js官方…