VUE +element ui 表格实现数据轮播滚动效果

vue项目中表格数据滚动 滚动到最后一条数据 重新调用接口

效果：
​​​​​​​

normal video

HTML代码

JS代码

props: {
    selectData: {
      type: Array,
      default: [],
    },
  },
  watch: {
    selectData: function (newVal, oldVal) {
      this.getBranchData();
    },
  },
  data() {
    return {
      branchData: [],
      interval: null,
      orgNameData: [],
      clientHeight:""
    };
  },
methods：{
    startScroll() {
      clearInterval(this.interval);
      this.interval = null;
    },

    stopScroll() {
      this.tableScroll();
    },

    //滚动方法 (主要代码) 
    tableScroll(){
        const table = this.$refs.sdangerTable
        const divData = table.bodyWrapper
        setInterval(() => {
          divData.scrollTop += 1
          if (divData.clientHeight + divData.scrollTop + 1 > divData.scrollHeight) {
            if(table.tableData.length>5){
              divData.scrollTop = 0
              this.getBranchData();
            }
         }
        },1000)
      const that = this
      window.onresize = () => {
        return (() => {
           window.screenHeight = document.body.clientHeight
           that.clientHeight = window.screenHeight
        })()
      }
    },
    //接口
    getBranchData(){
      let query={}
      getBranchOfficeStatistics(query).then((res)=>{
        this.orgNameData = [] 
        res.data.map((item)=>{
          this.orgNameData.push(
            Object.assign({name:item.orgName,value:item.orgCode}),
          )
        })
        setTimeout(() => {
         this.$emit("changeTitle",this.orgNameData)
        }, 6000);
         
    },
}