当前位置: 首页 > 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" });

http://www.lryc.cn/news/159965.html

相关文章:

  • 汽车电气架构
  • Spring中添加打印请求头的拦截器
  • LeetCode(力扣)216. 组合总和 IIIPython
  • 无涯教程-JavaScript - IMLOG10函数
  • C++ 学习之深拷贝 和 浅拷贝
  • Qt QtWidgets相关问题汇总
  • 【ubuntu22.04 文件管理器nautilus配置默认终端为alacritty】
  • 信息化发展30
  • css溢出隐藏的五种方法
  • RK3568-UART通信
  • 武警三维数字沙盘电子沙盘虚拟现实模拟推演大数据人工智能开发教程第15课
  • 【Linux从入门到精通】通信 | 共享内存(System V)
  • ubuntu 扩展内存挂载
  • 聚观早报|小米14渲染图曝光;蚂蚁金融大模型正式发布
  • musl libc 动态加载:默认链接脚本
  • 快速排序(递归和非递归两种方法实现)
  • ApiPost7使用介绍 | HTTP Websocket
  • Linux常用命令——convertquota命令
  • Linux 进程基础概念-进程状态、进程构成、进程控制
  • Unity Animation、Animator 的使用
  • Flink--2、Flink部署(Yarn集群搭建下的会话模式部署、单作业模式部署、应用模式部署)
  • 执行Django 的迁移命令报错[1193, Unknown system variable default_storage_engine]
  • Himall商城-公共方法
  • 海域可视化监管:浅析海域动态远程视频智能监管平台的构建方案
  • 使用Spring Boot + MyBatis实现多数据源
  • C++中的无限循环
  • Spark2x原理剖析(二)
  • tomcat安装、部署JSPGOU项目、Tomcat多实例
  • 257. 二叉树的所有路径
  • windows10使用wheel安装tensorflow2.13.0/2.10.0