vue使用element el-table实现动态表头数据表、并滚动展示列表

#vue使用el-table，实现动态数据表、并滚动展示

###tableLabel表头数据，支持条数、宽度设置
###tableData存放所有数据，
###showList存放用于展示的数据，
###使用setInterval定时更新showList(删除第一条，末尾添加一条）
###并通过vue computed实时更新渲染数据，实现滚动效果

###style 取消滚动条

#代码如下：

<template>
  <div class="tbDynam">
    <el-table 
    :data="updtList"
    height="400px" 
    max-height="400px" 
    size="small"
    row-class-name="row"
    cell-class-name="column"
    :highlight-current-row="true"
    >
    <el-table-column
        v-for="(item, index) in tableLabel"
        :key="index" 
        :prop="item.prop" 
        :width="item.width" 
        :label="item.label">
    </el-table-column>
</el-table>
  </div>
</template>

<script>
export default {
  name: "tbDyn",
  data() {
    return {
      showList: [],  //用于展示的数据列表
      isShowAll: true, //如果数据长度小于显示条数，就全部显示，不做滚动处理
      nextIndex: 6, //此标志用以记录，下一条滚动出来的数据所在的下标
      rows2Show: 6, //页面上显示的条数
      intervalFlag:NaN, //定时执行的记录，用以关闭执行
//原始数据列表
      tableData: [{id:1,date:'2018-7-24',sales:23.34,sale:137597.76,const:102203.71,profit:35394.05},
{id:2,date:'2018-7-25',sales:24.34,sale:137598.76,const:102204.71,profit:35395.05},
{id:3,date:'2018-7-26',sales:25.34,sale:137599.76,const:102205.71,profit:35396.05},
{id:4,date:'2018-7-27',sales:26.34,sale:137600.76,const:102206.71,profit:35397.05},
{id:5,date:'2018-7-28',sales:27.34,sale:137601.76,const:102207.71,profit:35398.05},
{id:6,date:'2018-7-29',sales:28.34,sale:137602.76,const:102208.71,profit:35399.05},
{id:7,date:'2018-7-30',sales:29.34,sale:137603.76,const:102209.71,profit:35400.05},
{id:8,date:'2018-7-31',sales:30.34,sale:137604.76,const:102210.71,profit:35401.05},
{id:9,date:'2018-8-1',sales:31.34,sale:137605.76,const:102211.71,profit:35402.05},
{id:10,date:'2018-8-2',sales:32.34,sale:137606.76,const:102212.71,profit:35403.05},
{id:11,date:'2018-8-3',sales:33.34,sale:137607.76,const:102213.71,profit:35404.05},
{id:12,date:'2018-8-4',sales:34.34,sale:137608.76,const:102214.71,profit:35405.05},
{id:13,date:'2018-8-5',sales:35.34,sale:137609.76,const:102215.71,profit:35406.05},
{id:14,date:'2018-8-6',sales:36.34,sale:137610.76,const:102216.71,profit:35407.05}
		 ],
		 // tableLabel表头数据：prop字段名
		 tableLabel: [
            {label: 'ID', width: '40', prop: 'id'},
            {label: '日期', width: '80%', prop: 'date'},
            {label: '销售量', width: '', prop: 'sales'},
            {label: '销售额', width: '', prop: 'sale'},
            {label: '成本', width: '', prop: 'const'},
            {label: '利润', width: '', prop: 'profit'}
        ]
    };
  },
   mounted(){
     this.getTBdata();//获取数据
     this.playDat();//定时执行
     },
  computed: {
    updtList() {//显示数据更新后渲染列表
      return this.showList;
    },
  },
  methods: {    
    playDat() {//定时执行
      if(this.isShowAll){
        this.stop;
      }else{
       this.intervalFlag=setInterval(this.changeList, 1000);//每秒执行一次插入删除操作
      }
    },
    stop() {
      if(!isNaN(this.intervalFlag)){//NaN
      clearInterval(this.intervalFlag);
      this.intervalFlag=NaN;
      }
    },
    getTBdata() {
      //todo to get data from api       
      if (this.tableData.length > this.rows2Show) {
        let arry=[...this.tableData];
        this.isShowAll = false;
        this.showList=arry.slice(0,this.rows2Show);//取前rows2Show个值 
      } else {
        this.isShowAll = true;
        this.showList = [...this.tableData];
      }            
    },
   
    changeList() {
          let arry1 = [...this.showList];
        if (this.tableData.length > (this.nextIndex)) {//length
          this.setList(arry1);
        }else{
        if (!this.isShowAll) {
          this.nextIndex=0;
          this.setList(arry1);
        }else{//循环到了末尾
            arry1=[...tableData];
            this.showList=arry1;
            this.stop;
        }
      }
    }, 
    setList( arry1){
      if (arry1.length > 0) {
            arry1.shift();//删除列表头条数据
            arry1.push(this.tableData[this.nextIndex]);//加入最后一条数据
            this.showList = arry1;//完成数据更新
            this.nextIndex += 1;//更新下标
            if(this.nextIndex==this.tableData.length ){
              this.nextIndex=0;
            }
          }else{
            arry1=[...tableData];
            this.showList=arry1.slice(0,this.rows2Show);//取前n条
            this.nextIndex=this.rows2Show;
          }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.tbDynam{
  width: 100%;
  height: 100%;
}
.el-table__body-wrapper::-webkit-scrollbar {
  /*width: 0;宽度为0隐藏*/
  width: 0px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 2px;
  height: 50px;
  background: #eee;
}
.el-table__body-wrapper::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.4);
}
</style>