vue怎么使用el-table實現循環輪播數據列表

這篇文章主要介紹“vue怎么使用el-table實現循環輪播數據列表”，在日常操作中，相信很多人在vue怎么使用el-table實現循環輪播數據列表問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么使用el-table實現循環輪播數據列表”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

使用el-table循環輪播數據列表

因為是在內網開發，安裝插件導包進去非常麻煩，有條件的可以去下載插件實現，咱這里貼一下手擼的代碼。

需要實現的效果大抵如下：（手機拍的，有些糊）

大部分實現的是監聽是否到了div的底部，如果到了底部，就直接跳到頂部，這種體驗感不是特別好，沒有達到輪播的真正效果。

 表格數據，devData我綁定了個空數組，因為實在是懶得敲了，按道理排名也應該是從api獲取，而不是拿index。

<template>
  <div>
    <el-table
      :data="devData"
      >
      <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()
     },

到此，關于“vue怎么使用el-table實現循環輪播數據列表”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！