vue+elementPlus table自动滚动

依赖
"vue": "^3.2.45",
"element-plus": "^2.2.21"

模板

<el-table ref="table" :height="tableHeight" :data="list" border stripe >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
</el-table>

组件

export default {
  data() {
      return{
          list:[],
          time:''
      }
  },
  computed:{
        tableHeight(){
            let h =
                  window.innerHeight ||
                  document.documentElement.clientHeight ||
                  document.body.clientHeight;
            return h
        }
  },
  mounted() {
      this.getList();
      this.autoScroll();
  },
  beforeUnmount() {
      if (this.timer) {
        clearInterval(this.timer);
      }
  },
  methods:{
      getList(){
        let list = []
        for(var i=0;i<30;i++){
            list.push({
                date: '2023-05-19',
                name: 'Tom',
                address: 'No. 189, Grove St, Los Angeles',
              })
        }
        this.list = list;
      },
      autoScroll() {
        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++
        }
      }
  }
}

效果