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

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

最近做了一个表格消息内容滚动的需求，闲暇之余特意封装了一个组件以供参考，该表格基于Element可以动态配置显示内容及数据，支持多级表格内容配置，支持实时推送数据更新，提供插槽自定义数据，当然你如果只想加载数据不想让列表滚动，传入isScroll='false'即可关闭内容滚动，还有不足之处还请多多指出。

效果如下所示

直接进入主题

1.页面引入组件，新建vue文件test.vue，引入表格组件，传入表格相关内容以及表格数据，内容如下

<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>

2.DtSrcoll.vue表格组件相关参数内容如下；

参数	说明	类型	默认值
newData	表格内容数据	Array	------
menuData	表格显示标题	Array	------
lineHeight	显示内容行数	Number	5
tableHeight	每一行的高度	Array	40（px）
rowTime	切换时间	Number	1500（ms）
duration	过渡时间	Number	500（ms）
isScroll	是否允许内容滚动	Boolean	true
isAgain	数据滚动到最后一行是否重新开始滚动	Boolean	false
isClear	数据滚动到最后一行是否停止滚动	Boolean	false

3. 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>

一个完整的内容滚动表格就出来了