自定义表格滚动组件（解决滚动时样式错位问题）

 html

      

         序号 
         检测点 
         识别项目 
        
         时间 
         结果 
      
      

        

          

            

              

                {{ index + 1 }}
              
              

                {{ it.name ? it.name : it.siteName ? it.siteName : '---' }}
              
              

                {{ it.fun && it.fun == "rod" ? '换向阀' : it.fun && it.fun
                  == "valve" ? '炉门' : it.fun && it.fun == "switch" ? '交换开关' : it.fun && it.fun
                    ==
                    "flue" ? '烟道' : '----' }}温度： {{ it.temp ? it.temp : '---' }}℃
              
              
              

                {{ it.ts ? it.ts : '---' }}
              
              

                {{ it.res === 0 ? '设备不存在' : it.res === 1 ? '正常' : it.res === 2 ? '异常' : '---' }}
              
            
          
        
        
暂无数据
      

js

      animate: false,
      intervalId: null,

    scroll() {
      const list = document.getElementById("device-list");
      const height = list.offsetHeight;
      console.log(this.tableData.length * 70, height, 'this.tableData.length * 40 > height');
      if (this.tableData.length * 70 > height) {
        this.animate = true;
        setTimeout(() => {
          this.tableData.push(this.tableData[0]);
          this.tableData.shift();
          this.animate = false;
        }, 1000);
      }
    },

tableRowClassName(index) {
      if (index % 2 == 0) {
        return 'even-row';
      } else {
        return 'odd-row';
      }
    },

  mounted() {
    this.intervalId = setInterval(this.scroll, 5000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },

css