当前位置: 首页 > news >正文

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" });

相关文章:

el-tree组件的锚点链接

el-tree部分&#xff1a; <el-tree:default-expand-all"true":data"anchorList":props"defaultProps"node-click"handleNodeClick"/> 组件内部部分&#xff1a; <div class"header" :id"content obj.id&q…...

汽车电气架构

文章目录 现阶段的汽车电气架构高压混合动力系统电子架构集成化&#xff08;E/E Architecture Integration&#xff09;车载以太网技术软件定义汽车 现阶段的汽车电气架构 当前最先进的汽车电气架构主要有以下几种&#xff1a; 48伏微混合系统&#xff08;48V Mild Hybrid Sys…...

Spring中添加打印请求头的拦截器

问题 因为最近这个项目没有调用链监控系统的支持&#xff0c;但是&#xff0c;本地PostMan调试的时候又需要请求头才能正常调试。 思路 喊ChatGPT实现一下能够打印所有请求头的拦截器&#xff0c;然后&#xff0c;集成到已有代码即可。 解决 RequestHeaderInterceptor.jav…...

LeetCode(力扣)216. 组合总和 IIIPython

LeetCode216. 组合总和 III 题目链接代码 题目链接 https://leetcode.cn/problems/combination-sum-iii/ 代码 class Solution:def combinationSum3(self, k: int, n: int) -> List[List[int]]:result[]self.backtracking(n, k, 0, 1, [], result)return resultdef back…...

无涯教程-JavaScript - IMLOG10函数

描述 IMLOG10函数以x yi或x yj文本格式返回复数的公共对数(以10为底)。可以从自然对数计算复数的公共对数,如下所示: $$\log_ {10}(x yi)(\log_ {10} e)\ln(x yi)$$ 语法 IMLOG10 (inumber)争论 Argument描述Required/OptionalInumberA complex number for which you …...

C++ 学习之深拷贝 和 浅拷贝

前言 在C中&#xff0c;浅拷贝和深拷贝是涉及对象复制的两种不同方式&#xff0c;它们之间的关键区别在于拷贝对象时是否复制对象所指向的数据。 正文 浅拷贝&#xff08;Shallow Copy&#xff09;&#xff1a; 浅拷贝只复制对象本身&#xff0c;而不复制对象所指向的数据。…...

Qt QtWidgets相关问题汇总

问&#xff1a;在Qt QWidget中设置WindowFlags为Qt::Window导致该Widget消失了&#xff0c;为什么&#xff1f; 答&#xff1a;WindowFlags设置为Qt::Window&#xff0c;表示该widget变为window类型&#xff0c;需要调用QWidget::show()方法。 问&#xff1a;Qt中WindowFlags…...

【ubuntu22.04 文件管理器nautilus配置默认终端为alacritty】

前言 ubuntu默认的终端不能通过设置里的默认应用程序配置nautilus是ubuntu自带的文件管理器&#xff0c;包管理器里面只有nautilus-extension-gnome-terminal而没有提供大多终端update-alternatives工具可以修改系统的默认终端(ctrl-alt-t)&#xff0c;但对nautilus文件管理器…...

信息化发展30

IT 治理的内涵 IT 治理作为组织上层管理的一个有机组成部分&#xff0c; 由组织治理层或高级管理层负责&#xff0c; 从组织全局的高度上对组织信息化与数字化转型做出制度安排&#xff0c; 体现了治理层和最高管理层对信息相关活动的关注&#xff1b;IT 治理强调数字目标与组…...

css溢出隐藏的五种方法

一、文本溢出 当容器中的文本内容超出容器的宽度或高度时&#xff0c;就会出现文本溢出的情况。下面介绍几种CSS实现文本溢出的方法。 单行文本溢出省略&#xff1a; 单行文本溢出省略通常用于标题等文本显示&#xff0c;可以通过设置white-space和text-overflow属性实现。w…...

RK3568-UART通信

RK3568-UART通信 1. 功能特点 RK3568有10个UART控制器&#xff0c;对应设备树里的uart0-uart9。 Rockchip UART (Universal Asynchronous Receiver/Transmitter) 基于16550A串口标准&#xff0c;支持以下 功能&#xff1a; 包含2组64字节的 FIFO&#xff0c;用于接收和传输支…...

武警三维数字沙盘电子沙盘虚拟现实模拟推演大数据人工智能开发教程第15课

部队三维数字沙盘电子沙盘虚拟现实模拟推演大数据人工智能开发教程第15课 现在不管什么GIS平台首先要解决的就是数据来源问题&#xff0c;因为没有数据的GIS就是一个空壳&#xff0c;下面我就目前一些主流的数据获取 方式了解做如下之我见&#xff08;主要针对互联网上的一些…...

【Linux从入门到精通】通信 | 共享内存(System V)

本篇文章接着上篇文章通信 | 管道通信&#xff08;匿名管道 & 命名管道&#xff09;进行讲解。本篇文章的中点内容是共享内存。 文章目录 一、初识与创建共享内存 1、1 什么是共享内存 1、2 共享内存函数 1、2、1 创建共享内存 shmget 1、2、2 ftok 生成 key 1、2、3 获取共…...

ubuntu 扩展内存挂载

一般新建虚拟机时&#xff0c;系统默认的空间是20G&#xff0c;但是当我们搭建一些环境之后&#xff0c;需要解压一些稍微大点的源码时内存可能不够用了&#xff0c;这时我们需要扩展内存。 一、硬盘扩展 首先&#xff0c;关闭虚拟机&#xff0c;在虚拟机设置中将硬盘容量扩展…...

聚观早报|小米14渲染图曝光;蚂蚁金融大模型正式发布

【聚观365】9月9日消息 小米14渲染图曝光 蚂蚁金融大模型正式发布 路特斯推出全电动轿车Emeya 上汽集团8月整车销量42.3万辆 ChatGPT网站流量连续三个月下滑 小米14渲染图曝光 高通旗下全新一代旗舰芯片骁龙8 Gen3将于10月24-26日举办的骁龙技术峰会上亮相&#xff0c;相…...

musl libc 动态加载:默认链接脚本

前言 当前动态链接与静态链接应用程序时,均手动指定了链接脚本 使用 musl ldso 动态加载,发现不指定 链接脚本,编译后的 动态链接与静态链的应用程序依旧可以工作 那么不指定链接脚本,应用程序就没有链接操作了?还是有个默认的链接脚本? 经过实际验证,原来 musl gcc 工具…...

快速排序(递归和非递归两种方法实现)

快速排序&#xff1a; 1.首先找一个基准点&#xff08;一般选取最左边第一个&#xff09; 2.先从后往前遍历&#xff0c;找到第一个小于基准值的元素&#xff1b; 3.再从前往后&#xff0c;找到第一个大于基准值的元素&#xff1b; 4.将这两个元素两两交换 5.当i与j相遇时…...

ApiPost7使用介绍 | HTTP Websocket

一、基本介绍 创建项目&#xff08;团队下面可以创建多个项目节点&#xff0c;每个项目可以创建多个接口&#xff09;&#xff1a; 参数描述库&#xff08;填写参数时自动填充描述&#xff09;&#xff1a; 新建环境&#xff08;前置URL、环境变量很有用&#xff09;&#x…...

Linux常用命令——convertquota命令

在线Linux命令查询工具 convertquota 把老的配额文件转换为新的格式 补充说明 convertquota命令用于将老的磁盘额数据文件&#xff08;“quota.user”和“quota.group”&#xff09;转换为新格式的文件&#xff08;“quota.user”和“quota.group”&#xff09;。 语法 c…...

Linux 进程基础概念-进程状态、进程构成、进程控制

目录 Linux 进程 进程基础概念 进程状态 进程的构成 进程控制 进程创建和终止 Linux 进程 参考&#xff1a; 「linux操作系统」进程的切换与控制到底有啥关系&#xff1f; - 知乎 (zhihu.com)&#xff0c;Linux进程解析_deep_explore的博客-CSDN博客&#xff0c;腾讯面试…...

丹青识画GPU算力优化部署教程:显存占用降低40%实操

丹青识画GPU算力优化部署教程&#xff1a;显存占用降低40%实操 1. 引言&#xff1a;当艺术邂逅算力&#xff0c;如何优雅地“瘦身”&#xff1f; 想象一下&#xff0c;你刚部署好一个能看懂画作、还能用书法题诗的AI应用——“丹青识画”。它融合了前沿的多模态AI与东方美学&…...

南京大学发布“视频侦探“系统:让AI像侦探一样从长视频中找线索

这项由南京大学与中科院自动化所联合进行的研究发表于2026年的计算机视觉与模式识别(CVPR)会议&#xff0c;论文编号为arXiv:2603.22285。有兴趣深入了解的读者可以通过该编号查询完整论文内容。当我们观看一部两小时的电影时&#xff0c;想要回答"主角在什么时候第一次露…...

新手避坑指南:PX4飞控连接TFmini、LIDAR Lite V3等定高雷达的完整接线与参数配置(QGC实操)

PX4飞控与定高雷达实战&#xff1a;从接线到参数配置的避坑指南 刚拿到PX4飞控和一堆传感器的新手们&#xff0c;面对密密麻麻的接口和参数设置&#xff0c;是不是有种无从下手的感觉&#xff1f;特别是当你需要连接定高雷达时&#xff0c;不同品牌&#xff08;北醒TFmini、LID…...

保姆级万物识别教程:阿里开源镜像快速部署,识别图片超简单

保姆级万物识别教程&#xff1a;阿里开源镜像快速部署&#xff0c;识别图片超简单 1. 开篇&#xff1a;为什么选择这个镜像&#xff1f; 今天给大家介绍一个特别实用的AI工具——阿里开源的"万物识别-中文-通用领域"镜像。这个镜像最大的特点就是简单易用&#xff…...

SENet实战:如何在PyTorch中实现Squeeze-and-Excitation模块(附完整代码)

PyTorch实战&#xff1a;手把手实现SENet中的SE模块 在计算机视觉领域&#xff0c;注意力机制已经成为提升模型性能的重要工具。今天我们将深入探讨如何在PyTorch中实现Squeeze-and-Excitation&#xff08;SE&#xff09;模块——这个让ResNet-50在ImageNet上表现接近ResNet-10…...

基于Spark+Hadoop+Hive大数据技术的产品评价分析系统设计与实现

前言本研究聚焦于设计与实现一种基于大数据技术的产品评价分析系统&#xff0c;通过构建多层架构体系与融合多元技术方法&#xff0c;为企业决策提供智能化支撑。 研究采用分层架构设计理念&#xff0c;将系统划分为数据采集、存储、处理、分析与展示五大模块。数据采集层综合运…...

Android设备指纹采集指南:从get_token协议看短视频SDK如何生成唯一设备ID

Android设备指纹生成机制深度解析&#xff1a;从基础原理到合规实践 在移动应用生态中&#xff0c;设备指纹技术扮演着至关重要的角色。它不仅关系到用户体验的连贯性&#xff0c;更是风控系统的基础支撑。本文将系统性地剖析Android平台下设备指纹的生成逻辑、技术实现方案以及…...

Agent调试技巧:LangSmith与日志分析

Agent开发最痛苦的部分是调试。传统代码调试&#xff0c;你能看到每一行执行的结果。Agent调试&#xff0c;你只能看到"输入 → 输出"&#xff0c;中间的推理过程是个黑盒。 这篇文章&#xff0c;我们讨论Agent调试的方法和工具&#xff1a;怎么追踪Agent的推理过程…...

小白友好!MogFace本地部署全攻略,从安装到检测只需3步

小白友好&#xff01;MogFace本地部署全攻略&#xff0c;从安装到检测只需3步 1. 工具简介 MogFace是一款基于CVPR 2022论文的高精度人脸检测工具&#xff0c;特别适合需要保护隐私的本地化应用场景。它能够准确识别照片中的多个人脸&#xff0c;无论这些人脸是大是小、是正脸…...

AI数字人开源方案:Duix.Avatar本地化部署与应用指南

AI数字人开源方案&#xff1a;Duix.Avatar本地化部署与应用指南 【免费下载链接】Duix-Avatar &#x1f680; Truly open-source AI avatar(digital human) toolkit for offline video generation and digital human cloning. 项目地址: https://gitcode.com/GitHub_Trending…...