element table实现轮播效果(由上到下)

请求新数据时调用该方法

    getNewTableData(){
      let that=this
      let data=that.getNewTableData //getNewTableData：代表请求的新数据
      if (data.length==0) {
        return
      }
      this.$nextTick(()=>{
        //let t=document.getElementsByClassName('el-table__body')[0] //直接获取class会影响全局
        //tableClassName为自定义table的class，防止污染全局
        let t=document.getElementsByClassName('tableClassName')[0].children[2].children[0]
        let timeInterval=setInterval(()=>{
          let marginTopNum=-1*data.length*50+'px'//向上隐藏新数据列表的高度 50为行高
          data.forEach(v=>{
            v['name1']='新' //新数据添加一个标识
          })
          setTimeout(() => {
            that.tableData.unshift.apply(that.tableData,data)//新数据拼在老数据上面
            t.style.transition='all 0s'
            t.style.marginTop=marginTopNum
          }, 500);
          setTimeout(() => {
            t.style.transition=`all ${data.length}s liner 0s`//以新数据列数为时间单位进行滚动
            t.style.marginTop='0px'
          }, 1000);
          clearInterval(timeInterval)
        },1000)
      })
    }

固定列表高度

::v-deep .el-table__row{
  height: 50px;
}