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

elementui table 自动滚动 纯js实现

startTableScroll() {
  // 获取表格滚动容器
  const tableWrapper = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper');
  if (tableWrapper) {
    this.scrollInterval = setInterval(() => {
      // 每次滚动 1 像素
      tableWrapper.scrollTop += 1;
      // 判断是否滚动到底部
      if (tableWrapper.scrollTop >= tableWrapper.scrollHeight - tableWrapper.clientHeight) {
        // 滚动到底部后重置滚动位置到顶部
        tableWrapper.scrollTop = 0;
      }
    }, 30); // 每 30 毫秒滚动一次
  }
},
stopTableScroll() {
  if (this.scrollInterval) {
    clearInterval(this.scrollInterval);
    this.scrollInterval = null;
  }
},
resetTableScroll() {
  // 重置表格滚动位置到顶部
  const tableWrapper = this.$refs.tableRef.$el.querySelector('.el-table__body-wrapper');
  if (tableWrapper) {
    tableWrapper.scrollTop = 0;
  }
}

::v-deep.el-table__body-wrapper::-webkit-scrollbar {
  width: 0 !important;
}

::v-deep .el-table__body-wrapper {
  scrollbar-width: none;
  -ms-overflow-style: none;
}   去掉bar
http://www.dtcms.com/a/71387.html

相关文章:

  • 【fNIRS可视化学习1】基于NIRS-SPM进行光极可视化并计算通道坐标
  • ubuntu系统下添加pycharm到快捷启动栏方法
  • 【漫话机器学习系列】134.基于半径的最近邻分类器(Radius-Based Nearest Neighbor Classifier)
  • TCP 三次握手四次挥手过程详解
  • 【C++重要!!!】赋值与初始化的区别
  • Flutter三棵树是什么,为什么这么设计
  • 【5*】坐标规则类动态规划学习笔记
  • MindGYM:一个用于增强视觉-语言模型推理能力的合成数据集框架,通过生成自挑战问题来提升模型的多跳推理能力。
  • 【SpringMVC】常用注解:@PathVariable
  • vue2自定义指令实现 el-input 输入数字,小数点两位 最高10位,不满足则截取符合规则的值作为新值
  • 【Pytorch实战教程】拆解PyTorch中的多头注意力:原来Transformer的核心组件可以这样玩
  • 关于WPS的Excel点击单元格打开别的文档的两种方法的探究【为单元格添加超链接】
  • 【VS小知识】VS如何保存UTF8
  • Flutter Dart 面向对象编程全面解析
  • Day 2:基础知识巩固(HTML、CSS、JavaScript)
  • matlab 自适应模糊PID在反应釜温度控制中的应用
  • vue2用vscode调试打不上断点
  • Select 选择器选项位置偏移的解决方案
  • 出海行动派 | 全球服务新征程!Bonree ONE海外版正式发布
  • 使用 PaddlePaddle 官方提供的 Docker 镜像
  • Python个人学习笔记(15):模块(time,datetime,random)
  • ubuntu中使用ollama部署本地deepseek
  • 在Spring Boot项目中接入DeepSeek深度求索,感觉笨笨的呢
  • SpringMVC(五)拦截器
  • 深度学习中LayerNorm与RMSNorm对比
  • Web安全:保护您的网站免受网络威胁
  • 2024下半年真题 系统架构设计师 案例分析
  • 将景区天气数据存储到Excel文件中
  • 【微服务】Nacos 配置动态刷新(简易版)(附配置)
  • 基于express+TS+mysql+sequelize的后端开发环境搭建