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
相关推荐
伍哥的传说5 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091912 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding13 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜14 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD15 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding16 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空18 分钟前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子81628 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js