vue 自动滚动table的组件

前言：该组件接收参数为tableData,collumData,max,lineHeight,refe用法说明在组件中已注释，滚动部分采用的transform,滚动速度在内部根据滚动的数据量进行了设置，使用的朋友如果有改进的地方请留言，共同做好这个组件
上代码

1 公共css中
@keyframes scroll
{
0% {transform: translateY(0%)}
100% {transform: translateY(-100%)}
}

@-webkit-keyframes scroll
{
0% {transform: translateY(0%)}
100% {transform: translateY(-100%)}
}
@-moz-keyframes scroll
{
0% {transform: translateY(0%)}
100% {transform: translateY(-100%)}
}

2 组件

<template>
  <div class="scroll-table" :style="{lineHeight:lineHeight}">
    <div class="scroll-table-head">
      <div class="row">
        <div v-for="item in collumList" :key="item.index" :style="{flex:item.collumFlex}">{{item.label}}</div>
      </div>
    </div>
    <div class="scroll-table-content" :style="shiftScrollClass" :ref="refe">
      <div class="row" v-for="item in tableList" :key="item.index">
        <div v-for="collum in collumList" :style="{flex:collum.collumFlex,color:item.color}" v-model="item[collum.prop]">{{item[collum.prop]}}</div>
      </div>
    </div>
    <div class="scroll-table-content" :style="shiftScrollClass" v-if="shiftScrollFlg">
      <div class="row" v-for="item in tableList" :key="item.index">
        <div v-for="collum in collumList" :style="{flex:collum.collumFlex,color:item.color}" v-model="item[collum.prop]">{{item[collum.prop]}}</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "collumScrollTable",
    data(){
      return{
        tableList:[],
        collumList:[],
        shiftScrollClass:'',
        shiftScrollFlg:false,
        maxRow:0,
        clientHeight:window.innerHeight
      }
    },
    props:{
      tableData:Array,//必填(table的基础数据)
      collumData:Array,//必填(label prop width)label代表列名，prop代表该列取tableData中的哪个字段，width代表列宽度px,%,vw均可
      max:String,//必填(如果有refe可以写9999)最多显示行数，超出滚动
      lineHeight:{
        default:'400%'
      },//行间距
      refe:{
        default:'mainScrollContent2'
      } //无法判断max数量的时候，绑定主content的ref为mainScrollContent1比较maxHeight，超出滚动
    },
    methods:{
    },
    mounted(){
      console.log(this.refe)
      let that = this;
      if(that.max && that.max != ''){
        that.maxRow = that.max;
      }else {
        that.maxRow = 99999;
      }
      that.tableList = that.tableData;
      that.collumList = that.collumData;
      let index = 0;
      that.collumList.map(item =>{
        if(item.width && item.width != ''){
          item.collumFlex = '0 0 ' + item.width;
        }else {
          item.collumFlex = '0 0 auto';
        }
        item.index = index++;
      });
      let index1 = 0;
      that.tableList.map(item =>{
        item.index = index1++;
        if(item.status == '黄色异常'){
          item.color = 'yellow'
        }else if(item.status == '橙色异常'){
          item.color = 'orange'
        }else if(item.status == '红色异常' || item.status == '异常'){
          item.color = 'red'
        }else if(item.status == '离线'){
          item.color = '#ccc'
        }else{
          item.color = '#fff'
        }
      });
      if(that.tableList.length > that.maxRow){
        that.shiftScrollFlg = true;
        that.shiftScrollClass = '{animation: scroll ' + that.tableList.length*4 +
          's linear infinite; -webkit-animation: scroll ' + that.tableList.length*4 +
          's infinite linear; -moz-animation: scroll ' + that.tableList.length*4 +
          's infinite linear;}';
      }else {
        that.shiftScrollFlg = false;
        that.shiftScrollClass = '';
      }
      let maxHeight = window.innerHeight - 260
      setTimeout(()=>{
        if(this.refe == 'mainScrollContent1'){
          if(window.getComputedStyle(this.$refs[this.refe]).height.replace('px','') >= maxHeight){
            this.shiftScrollFlg = true
            this.shiftScrollClass = '{animation: scroll ' + that.tableList.length*4 +
            's linear infinite; -webkit-animation: scroll ' + that.tableList.length*4 +
            's infinite linear; -moz-animation: scroll ' + that.tableList.length*4 +
            's infinite linear;}'
          }else{
            this.shiftScrollFlg = false;
            this.shiftScrollClass = '';
          }
        }
      },500)
    },
  }
</script>
<style scoped lang="scss">
  .scroll-table{
    position: relative;
    z-index: 9999999;
    width: 100%;
    overflow: hidden;
    text-align: center;
    line-height:400%;
    &-head{
      background-color:rgb(16, 54, 87);
      color: #909399;
      position: relative;
      z-index: 10;
    }
    &-content{
      background-color:transparent;
      z-index: 9;
      color: #fff;
      position:relative;
    }
  }
</style>

3 使用页面

<collum-scroll-table style="height:calc(97vh - 220px)" :lineHeight="lineHeight200" :refe="'mainScrollContent1'" :tableData="tableData" :collumData="collumData" :max="9999" v-if="scrollTableFlg"/>

import collumScrollTable from '@/common/components/collumScrollTable'