vue自定義table表如何實現(xiàn)內(nèi)容上下循環(huán)滾動

更新時間：2023年10月13日 15:21:08 作者：·某某·

這篇文章主要介紹了vue自定義table表如何實現(xiàn)內(nèi)容上下循環(huán)滾動問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

需求

對一段table表數(shù)據(jù)進行異常與正常類型的分類處理；

異常數(shù)據(jù)固定于table表內(nèi)上方顯示；

正常數(shù)據(jù)則在異常數(shù)據(jù)下方實現(xiàn)循環(huán)滾動效果；

（若正常數(shù)據(jù)高度未溢出table表高度，正常顯示即可，無需滾動）

效果圖展示

代碼核心部分

<!-- html 部分-->
<!--   
scrollWrap: 滾動區(qū)域； 
scrollWrapHeight：table總高度 - header高度 - 異常數(shù)據(jù)高度 
-->
<div
  class="scrollWrap"
  :style="{
    height: scrollWrapHeight + 'px',
    overflowY: 'hidden',
  }"
>
<!--   
scrollNum：滾動時，復(fù)制正常table數(shù)據(jù)一份，用于上下循環(huán)滾動無縫銜接
-->
  <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>
<!-- css 部分-->
 .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">狀態(tài)</div>
        <div class="table-header-item-title">數(shù)據(jù)標(biāo)題1</div>
        <div class="table-header-item-title">數(shù)據(jù)標(biāo)題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 {
      // 調(diào)節(jié)滾動速率
      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高度 * 個數(shù)
      return 600 - 52 - this.errData.length * 52
    },
    // 滾動層份數(shù)，當(dāng)內(nèi)容溢出scrollWrapHeight，復(fù)制兩份，添加滾動動畫
    // 否則就一份，不填加滾動動畫
    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>