源码搜藏网

使用el-table循环轮播数据列表

因为是在内网开发，安装插件导包进去非常麻烦，有条件的可以去下载插件实现，咱这里贴一下手撸的代码。

需要实现的效果大抵如下：（手机拍的，有些糊）

大部分实现的是监听是否到了div的底部，如果到了底部，就直接跳到顶部，这种体验感不是特别好，没有达到轮播的真正效果。

表格数据，devData我绑定了个空数组，因为实在是懒得敲了，按道理排名也应该是从api获取，而不是拿index。

<template>
 <div>
  <el-table
   :data="devData"
   style="width: 100%">
   <el-table-column label="排名">
    <template slot-scope="scope">
     <span>第{{scope.$index +1}}名</span>
    </template>
   </el-table-column>
   <el-table-column
    prop="name"
    label="日期">
   </el-table-column>
   <el-table-column
    prop="scale"
    label="姓名">
   </el-table-column>
  </el-table>
 </div>
</template>

<script>
export defalut {
 dsta() {
  return {
  devData: []
  }
 }
}
</script>

export defalut {
   created() {
      var isScroll = true // 也可以定义到data里
      this.$nextTick(() => {
        let div = document.getElementsByClassName('el-table__body-wrapper')[0]
        div.style.height = '110px'
        div.addEventListener('mouseenter', () => {
         isScroll = false
        })
        div.addEventListener('mouseleave', () => {
         idScroll = true
        })
        let t = document.getElementByClassName('el-table__body')[0]
        setInterval(() =>{
           if(isScroll) {
             let data = this.devData[0]
             setTimeout(() => {
                this.devData.push(data)
                t.style.transition = 'all .5s'
                t.style.marginTop = '-41px'
               }, 500)
             setTimeout(() =>{
               this.devData.splice(0,1)
               t.style.transition = 'all 0s ease 0s'
               t.style.marginTop = '0'
             }, 1000)
           }
         }, 2500)
       })
     }
  }

vue el-table简单轮播

<el-table :data="readData0" size="mini" class="v-table" height="200" ref="tableData_realtime" @cell-mouse-enter="hover_dibiao" @cell-mouse-leave="leave_dibiao">
<el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="area" label="地区" align="center" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="siteName" label="名称" align="center" :show-overflow-tooltip="true"></el-table-column>
</el-table> 

created() {
    this.$nextTick(()=> { 
      this.tableData_dibiao()//轮播        
    })     
 },

tableData_dibiao(){
    const table = this.$refs.tableData_realtime     
    const divData = table.bodyWrapper     
    this.dibiao_clear=setInterval(() => {       
      divData.scrollTop += 1       
      if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {         
        divData.scrollTop = 0
      }
    }, 100)      
  }, 
  hover_dibiao(){//鼠标移入清除定时器（暂停轮播）
    clearInterval(this.dibiao_clear)
  },
  leave_dibiao(){//鼠标移出继续执行轮播
    this.tableData_dibiao()
  },    

以上为个人经验，希望能给大家一个参考，也希望大家多多支持源码搜藏网。