关于vue.js:vueelementPlus-table自动滚动

依赖
“vue”: “^3.2.45”,
“element-plus”: “^2.2.21”

组件

<el-table ref="table" :height="tableHeight" :data="list" border stripe >
      
      <el-table-column align="center" ></el-table-column>
      <el-table-column align="center" ></el-table-column>
      <el-table-column align="center" ></el-table-column>
</el-table>

代码

export default {
  data() {
      return{
          time:''
      }
  },
  computed:{
        tableHeight(){
            let h =
                  window.innerHeight ||
                  document.documentElement.clientHeight ||
                  document.body.clientHeight;
            return h-28
        }
    },
  mounted() {
      this.autoScroll();
  },
  beforeUnmount() {
      if (this.timer) {
        clearInterval(this.timer);
      }
  },
  methods:{
      autoScroll(init) {
        this.$nextTick(() => {
          const t = 50
          const box = this.$el.querySelector('.el-scrollbar__wrap')
          const content = this.$el.querySelector('.el-table__body')
          this.timer = setInterval(() => {
            this.rollStart(box, content)
          }, t)
        })
      },
      rollStart(box, content) {
        if (box.scrollTop >= (content.scrollHeight - box.offsetHeight)) {
          box.scrollTop = 0
        } else {
          box.scrollTop++
        }
      }
  }
}

成果

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理