vue实现间隔行变色表格，并实现自动滚动

<div class="perimeterAlarm">
            <div class="module_title"><span>周界告警</span></div>
            <div class="frameClass">
              <div class="titleClass">
                <div class="text">名称</div>
                <div class="text">事件</div>
                <div class="text">时间</div>
              </div>
              <div
                class="borderClass"
                @mouseenter="mEnter1"
                @mouseleave="mLeave1"
              >
               <div ref="scrollItemBox1">
                <div
                  v-for="(item, index) in perimeterList"
                  :key="index"
                  class="lineClass"
                  style=""
                  :style="{
                    backgroundColor: getBackgroundColor(Math.floor(index % 2)),
                    transform: `translate(0px,-${scrollTop1}px)`,
                  }"
                >
                  <div class="content">{{ item.deviceName | emptyHolder }}</div>
                  <div class="content">{{ item.logName | emptyHolder }}</div>
                  <div class="content">
                    {{ parseTime(item.dataTime) | emptyHolder }}
                  </div>
                </div>
               </div>
              </div>
            </div>
          </div>


getBackgroundColor(index) {
      const colors = ["rgba(13, 40, 37, 0.77)", "rgba(10, 34, 31, 0.77)"];
      return colors[index];
    },

.perimeterAlarm {
      height: 25%;
    }
    .module_title {
      width: 97.27%;
      height: 50px;
      background: url("~@/assets/screen/title-bg.png") no-repeat;
      background-size: 100% 100%;
      margin-left: -10px;
      display: flex;
      align-items: center;
      & > span {
        display: inline-block;
        font-size: 20px;
        color: #e8feff;
        background: linear-gradient(
          180deg,
          #0ec5ec 0%,
          #88ffe4 0%,
          #effcfe 58.7646484375%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        width: inherit;
        padding-left: 65px;
        font-family: "SOURCEHANSANSCN-MEDIUM";
      }
    }
     .frameClass {
      margin: 9px 0 0 32px;
    }
     .titleClass {
      width: 376px;
      height: 34px;
      background: rgba(26, 62, 56, 0.77);
      opacity: 0.77;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      border-bottom: 1px solid rgba(34, 82, 79, 0.45);
      .text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #58fcdf;
      }
      .lineClass {
        display: flex;
        height: 34px;
        width: 373px;
        background-color: rgb(13, 40, 37);
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
     .borderClass {
      overflow: hidden;
      // overflow: auto;
      height: 118px;
      width: 376px;
    }

**

实现数据滚动

<template>
    <div class="InfiniteScroll">
        <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
            <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                <div ref="scrollItemBox">
                    <div class="scroll_item" v-for="(item, index) in listData" :key="index">
                        {{item.title}}
                    </div>
                </div>
                <div v-html="copyHtml"></div>
            </div>
        </div>
    </div>
</template>

<script>
let timer = null;
export default {
    name: "InfiniteScroll",
    data() {
        return {
            scrollTop: 0, //列表滚动高度
            speed: 15, //滚动的速度

            listData: [{
                'title': '无缝滚动第一行',
            }, {
                'title': '无缝滚动第二行',
            }, {
                'title': '无缝滚动第三行',
            }, {
                'title': '无缝滚动第四行',
            }, {
                'title': '无缝滚动第五行',
            }, {
                'title': '无缝滚动第六行',
            }, {
                'title': '无缝滚动第七行',
            }, {
                'title': '无缝滚动第八行',
            }, {
                'title': '无缝滚动第九行',
            },{
                'title': '无缝滚动第十行',
            },{
                'title': '无缝滚动第十一行',
            }], //表示有多少个列表项
            copyHtml: '', //复制多一份防止滚动到后面出现空白
        };
    },
    mounted() {
        // 如果列表数据是异步获取的，记得初始化在获取数据后再调用
        this.initScroll()
    },
    methods: {
        initScroll() {
            this.$nextTick(() => {
                this.copyHtml = this.$refs.scrollItemBox.innerHTML
                this.startScroll()
            })
        },
        // 鼠标移入停止滚动
        mEnter() {
            clearInterval(timer);
        },
        // 鼠标移出继续滚动
        mLeave() {
            this.startScroll()
        },
        // 开始滚动
        startScroll() {
            timer = setInterval(this.scroll, this.speed);
        },
        // 滚动处理方法
        scroll() {
            this.scrollTop++
            // 获取需要滚动的盒子的高度
            let scrollItemBox = this.$refs.scrollItemBox.offsetHeight
            // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
            if (this.scrollTop >= scrollItemBox) {
                this.scrollTop = 0
            }
        }

    },
};
</script>

<style scoped>
.InfiniteScroll {
    box-sizing: border-box;
    padding: 50px;
}

.scroll_parent_box {
    width: 300px;
    height: 400px;
    border: 1px solid #ebeef5;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0 10px;
}

.scroll_list {
    transition: all 0ms ease-in 0s
}

.scroll_item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
}
</style>

改造后实现的最终效果