Element动态生成表格以及表格内容无缝滚动

直接进入主题

之前写了一篇文章，滚动表格+单个修改背景颜色,，有需要的可以看一下

如果是看一个页面只能应用一次应用多次就会无效问题，请直接看最下面

1.页面引入组件，新建vue文件test.vue，引入表格组件，传入表格相关内容以及表格数据，内容如下（test是页面，下面的才是组件，引用的时候注意地址是否正确）

<template>
   <div style="height:100%;width:80%">
       <dt-srcoll :newData="dutyRateData"
                  :menuData="menuData"
                  :lineHeight="5"
                  :tableHeight="50">
           <template slot="footerTable">  //自定义插槽
               <el-table-column
                     label="操作">
                   <template slot-scope="row">
                      <el-button type="text" size="small">详情</el-button>
                   </template>
               </el-table-column>
           </template>
       </dt-srcoll>
   </div>
</template>

<script>
import DtSrcoll from '../components/scroll'
 export default {
   components:{
     DtSrcoll
   },
   data() {
     return {
       menuData:[ //表格内容
         {
           name:'班级',
           prop:'group'
         },
         {
           name:'书本数量',
           prop:'bookNum'
         },
         {
           name:'数量',
           prop:'sceneNum'
         },
         {
           name:'进度',
           prop:'dutyRate'
         }
       ],
       dutyRateData: [    //表格数据（也可以通过实时推送更新数据）
         { group: "电工班1", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班2", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班3", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班4", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班5", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班6", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班7", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班8", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班9", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班10", bookNum: 3, sceneNum: 0, dutyRate: "88%" },
         { group: "电工班11", bookNum: 3, sceneNum: 0, dutyRate: "88%" }
       ],

     };
   }
 };
</script>

1. DtSrcoll.vue表格组件内容如下，复制即可，el-table内容也可以根据需求自行更改

<template>
   <div>
       <el-table
               :data="newData"
               border
               style="width: 100%"
               align="center"
               size="mini"
               id="dbM">
           <el-table-column
                   label="序号"
                   type="index"
                   width="60">
           </el-table-column>
           <el-table-column
           v-for="item in menuData"
           :label="item.name"
           :show-overflow-tooltip="true"
           :prop="item.prop">
               <!--todo 二级表头-->
               <el-table-column
                       v-for="subItem in item.child"
                       :label="subItem.name">
                   <template v-if="!subItem.child" slot-scope="scope">
                       {{subItem.val}}
                   </template>
                   <!--todo 三级表头-->
                   <el-table-column
                           v-for="subItem2 in subItem.child"
                           :label="subItem2.name">
                       <template v-if="!subItem2.child" slot-scope="scope">
                           {{subItem2.val}}
                       </template>
                   </el-table-column>
               </el-table-column>
           </el-table-column>
           <slot name="footerTable"></slot>
       </el-table>
   </div>
</template>

<script>
 export default {
   name: 'DtSrcoll',
   props:{
     newData:Array, //表格数据
     menuData:Array, //表格行内容
     lineHeight:{ //页面需要显示的行数
       type:Number,
       default: 4
     },
     rowTime:{ //每一行滚动切换等待的时间（毫秒）
       type:Number,
       default: 1500
     },
     duration:{ //过渡时间
       type:Number,
       default: 500
     },
     tableHeight:{ //行高
       type:Number,
       default: 40
     },
     isClear:{ //数据滚动到最后一行是否停止滚动
       type:Boolean,
       default: false
     },
     isAgain:{ // 数据滚动到最后一行是否重新开始滚动
       type:Boolean,
       default: false
     },
     isScroll:{ //是否允许内容滚动
       type:Boolean,
       default: true
     }

   },
   data(){
     return{
       active:0,
       timer:''
     }
   },
   mounted() {
     let _this=this
     this.$nextTick(() => {
       let elwrapper = document.getElementsByClassName("el-table__body-wrapper")[0];
       elwrapper.style.height=this.lineHeight*this.tableHeight+'px'
       let elBody = document.getElementsByClassName("el-table__body")[0];
       let elRow=document.getElementsByClassName('el-table__row');
       for(let node of elRow){
           node.style.height=this.tableHeight+'px'
       }
       elBody.style.top = 0;
       elBody.style.transactionDuration=this.duration+'ms'
       if(_this.isScroll){
         _this.timer=setInterval(function () {
           if(_this.active<parseInt(_this.newData.length)-parseInt(_this.lineHeight)){
             _this.active+=1
             elBody.style.top=parseInt(elBody.style.top)-parseInt(_this.tableHeight)+'px'
           }else{
             if(this.isClear){
               clearInterval(this.timer)
             }
             if(_this.isAgain){
               _this.active=0
               elBody.style.top=0
             }else{
               clearInterval(_this.timer)
             }
           }
         },_this.rowTime)
       }
     });
   },
   destroyed () {
     clearInterval(this.timer)
   }
 }
</script>

<style >
.el-table__body{
   position: absolute;
   transition: all 500ms linear;
}

</style>

参考链接https://blog.csdn.net/qq_42166078/article/details/115768812 

-------------------6.28 后期测试发现这个组件，一个页面只能应用一次应用多次就会无效，是因为

  let elwrapper = document.getElementsByClassName("el-table__body-wrapper")[0];
       elwrapper.style.height=this.lineHeight*this.tableHeight+'px'
       let elBody = document.getElementsByClassName("el-table__body")[0];
       let elRow=document.getElementsByClassName('el-table__row');

这里获取内容获取的是整个页面的，就会导致出现问题

如果一个页面使用多次可修改为

  let elBody = $(当前页面的class名称  .el-table__body);

这样就可以获取不同的，这样修改的话需要多写呀一个组件，还想到一个办法就是去传递每个页面的class 这个暂时未测试