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

?html

<div class="tableBox">
      <div class="header">
        <span class="item" style="width: 10%;"> 序号 </span>
        <span class="item" style="width: 20%;"> 检测点 </span>
        <span class="item" style="width: 25%;"> 识别项目 </span>
        <!-- <span class="item"> 设备温度（℃） </span> -->
        <span class="item" style="width: 25%;"> 时间 </span>
        <span class="item" style="width: 20%;"> 结果 </span>
      </div>
      <div class="device-list" id="device-list">
        <div :class="{ anim: animate === true }" v-if="tableData.length">
          <div v-for="(it, index) in tableData" :key="index">
            <div class="itemList" @click="showRowDetail" :class="tableRowClassName(index)">
              <div class="index" :title="it.name">
                {{ index + 1 }}
              </div>
              <div class="name">
                {{ it.name ? it.name : it.siteName ? it.siteName : '---' }}
              </div>
              <div class="fun">
                {{ it.fun && it.fun == "rod" ? '换向阀' : it.fun && it.fun
                  == "valve" ? '炉门' : it.fun && it.fun == "switch" ? '交换开关' : it.fun && it.fun
                    ==
                    "flue" ? '烟道' : '----' }}温度： {{ it.temp ? it.temp : '---' }}℃
              </div>
              <!-- <div class="status">
                {{ it.temp ? it.temp : '---' }}
              </div> -->
              <div class="ts">
                {{ it.ts ? it.ts : '---' }}
              </div>
              <div class="status">
                {{ it.res === 0 ? '设备不存在' : it.res === 1 ? '正常' : it.res === 2 ? '异常' : '---' }}
              </div>
            </div>
          </div>
        </div>
        <div class="nodata" v-else>暂无数据</div>
      </div>

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

<style scoped lang="scss">
.tableBox {
  height: calc(100% - 61px);
  padding: 0 10px;

  .header {
    width: 100%;
    display: flex;
    padding: 5px 6px;

    .item {
      width: 20%;
      text-align: center;
      color: #fff;
      font-size: 14px;
    }

    .status {
      width: 40%;
    }
  }

  .device-list {
    height: calc(100% - 45px);
    overflow-y: scroll;
    //overflow-y: auto;
    //overflow-x: hidden;
  }

  .type {
    background: rgba(125, 250, 255, 0.35);
    color: #00e8ff;
    display: flex;
    justify-content: space-between;
    padding: 5px 12px;
    font-size: 14px;
    margin-bottom: 4px;

    .arrow {
      cursor: pointer;
    }
  }

  .anim {
    transition: margin-top 1s;
    margin-top: -40px;
  }

  .itemList {
    //background: rgba(125, 250, 255, 0.2);
    display: flex;
    font-size: 14px;
    padding: 8px 0 8px 6px;
    color: #fff;
    margin-bottom: 5px;
    box-sizing: border-box;

    >div {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
      padding: 0 5px;
      text-align: center;
    }
    .index{
      width: 16% !important;
    }
    .name{
      width: 36% !important; 
    }
    .fun{
      width: 40% !important;
    }
    .ts {
      width: 40% !important;
    }
    .status{
      width: 30% !important;
    }

    .name {
      color: #fff;
      width: 20%;

      i {
        cursor: pointer;
      }

      .yellowStar {
        color: #ffc100;
      }

      .greyStar {
        color: #b0b0b0;
      }
    }

    .status {
      width: 40%;
      padding: 0;
      font-size: 12px;

      span {
        border: 1px solid #fff;
        border-radius: 8px;
        padding: 1px 3px;
        cursor: pointer;
        color: #fff;
        margin: 0 3px;

        &.gray {
          background-color: #5c6986;
          border-color: #5c6986;
        }

        &.red {
          background-color: #ff5754;
          border-color: #ff5754;
        }

        &.green {
          background-color: #0ad772;
          border-color: #0ad772;
        }
      }
    }

    .blue {
      // border: 1px solid #00e8ff;
      // border-radius: 8px;
      // padding: 0 3px;
      // line-height: 14px;
      cursor: pointer;
      margin-left: 8px;
      color: #00e8ff;
    }
  }

  .even-row {
    background-color: #082959 !important;
    //color: #47e2ff;
  }

  .odd-row {
    background-color: #051f51 !important;
    //color: #47e2ff;
  }
}
</style>