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
相关推荐
万少13 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站15 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名17 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫18 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊18 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter18 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折18 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_18 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
Angelial18 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu19 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端