当前位置: 首页 > 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

相关文章:

  • 【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 镜像
  • 美F-35险被胡塞武装击中,损失增大让行动成“烂尾仗”
  • 张广智︱“编年事辑”:打开学人心路历程的窗户
  • 盛和资源海外找稀土矿提速:拟超7亿元收购匹克,加快推动坦桑尼亚项目
  • “老中青少”四代同堂,季春艳携锡剧《玲珑女》冲击梅花奖
  • 冰雹造成车损能赔吗?如何理赔?机构答疑
  • 七部门:进一步增强资本市场对于科技创新企业的支持力度