vue自定义table表实现内容上下循环滚动

需求

对一段table表数据进行异常与正常类型的分类处理；
异常数据固定于table表内上方显示；
正常数据则在异常数据下方实现循环滚动效果；
（若正常数据高度未溢出table表高度，正常显示即可，无需滚动）

---

效果图展示

代码核心部分

<div
  class="scrollWrap"
  :style="{
    height: scrollWrapHeight + 'px',
    overflowY: 'hidden',
  }"
>

  <div
    :class="scrollNum > 1 ? 'scroll' : ''"
    :style="{
      animationDuration: time + 's',
    }"
    v-for="(a, index) in scrollNum"
    :key="index"
  >
    <div
      class="table-bodySuccess"
      v-for="(item, index) in successData"
      :key="index"
      :style="{
        background: successBgColor(index),
      }"
    >
      <div class="table-body-item-title">
        {{ item.name }}
      div>
      <div class="table-body-item-title">
        <div class="circle">div>
      div>
      <div class="table-body-item-title">{{ item.tampNum }}℃div>
      <div class="table-body-item-title">{{ item.eleNum }}Adiv>
    div>
  div>
div>


 .scrollWrap::-webkit-scrollbar {
   width: 0 !important;
 }
 .scroll {
   animation: scrollData 10s infinite linear;
 }
 @keyframes scrollData {
   from {
     transform: translateY(0px);
   }
   to {
     transform: translateY(-100%);
   }
 }

完整代码展示

<template>
  <div class="left">
    <div class="table">
      <div class="table-header">
        <div class="table-header-item-title">名称</div>
        <div class="table-header-item-title">状态</div>
        <div class="table-header-item-title">数据标题1</div>
        <div class="table-header-item-title">数据标题2</div>
      </div>
      <div
        class="table-bodyError"
        v-for="(item, index) in errData"
        :key="index"
        :style="{ background: errBgColor(index) }"
      >
        <div class="table-body-item-title">
          {{ item.name }}
        </div>
        <div class="table-body-item-title">
          <div class="circle"></div>
        </div>
        <div class="table-body-item-title">
          {{ item.tampNum }}
        </div>
        <div class="table-body-item-title">
          {{ item.eleNum }}
        </div>
      </div>
      <div
        class="scrollWrap"
        :style="{
          height: scrollWrapHeight + 'px',
          overflowY: 'hidden',
        }"
      >
        <div
          :class="scrollNum > 1 ? 'scroll' : ''"
          :style="{
            animationDuration: time + 's',
          }"
          v-for="(a, index) in scrollNum"
          :key="index"
        >
          <div
            class="table-bodySuccess"
            v-for="(item, index) in successData"
            :key="index"
            :style="{
              background: successBgColor(index),
            }"
          >
            <div class="table-body-item-title">
              {{ item.name }}
            </div>
            <div class="table-body-item-title">
              <div class="circle"></div>
            </div>
            <div class="table-body-item-title">{{ item.tampNum }}℃</div>
            <div class="table-body-item-title">{{ item.eleNum }}A</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      // 调节滚动速率
      time: 15,
      errData: [
        { name: 11, status: 0, tampNum: 10, eleNum: 15 },
        { name: 22, status: 0, tampNum: 10, eleNum: 15 },
        { name: 33, status: 0, tampNum: 10, eleNum: 15 },
      ],
      successData: [
        { name: 'aaa', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'bbb', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'ccc', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'ddd', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'eee', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'fff', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'ggg', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'hhh', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'iii', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'jjj', status: 1, tampNum: 10, eleNum: 15 },
        { name: 'kkk', status: 1, tampNum: 10, eleNum: 15 },
      ],
    }
  },
  computed: {
    errBgColor: function () {
      return function (index) {
        if (index % 2 === 0) {
          return '#e8f7ff'
        } else {
          return '#ffffff'
        }
      }
    },
    successBgColor: function () {
      return function (index) {
        if (this.errData.length % 2 === 0) {
          if (index % 2 === 0) {
            return '#e8f7ff'
          } else {
            return '#ffffff'
          }
        } else {
          if (index % 2 === 0) {
            return '#ffffff'
          } else {
            return '#e8f7ff'
          }
        }
      }
    },
    // 滚动层高度
    scrollWrapHeight: function () {
      // left高度 - table-header高度 - table-bodyError高度 * 个数
      return 600 - 52 - this.errData.length * 52
    },
    // 滚动层份数，当内容溢出scrollWrapHeight，复制两份，添加滚动动画
    // 否则就一份，不填加滚动动画
    scrollNum: function () {
      let successHeight = this.successData.length * 52
      if (successHeight > this.scrollWrapHeight) {
        return 2
      } else {
        return 1
      }
    },
  },
}
</script>

<style lang="less" scoped>
.left {
  width: 520px;
  height: 600px;
  background-color: #fab4b4;
  border-bottom: 1px solid red;
  position: relative;
  .table-header {
    width: 100%;
    background-color: skyblue;
    color: #e1f3ff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    .table-header-item-title {
      height: 52px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .table-bodyError,
  .table-bodySuccess {
    width: 100%;
    color: red;
    font-size: 16px;
    display: flex;
    .table-body-item-title {
      width: 100%;
      height: 52px;
      display: flex;
      justify-content: center;
      align-items: center;
      .circle {
        width: 12px;
        height: 12px;
        background: #ea4141;
        border-radius: 50%;
      }
    }
  }
  .table-bodySuccess {
    color: #000;
    .table-body-item-title {
      .circle {
        background: #29b153;
      }
    }
  }
  .scrollWrap::-webkit-scrollbar {
    width: 0 !important;
  }
  .scroll {
    animation: scrollData 10s infinite linear;
  }
  @keyframes scrollData {
    from {
      transform: translateY(0px);
    }
    to {
      transform: translateY(-100%);
    }
  }
}
</style>