vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)

更新時間：2022年04月24日 11:41:26 作者：vanora1111

這篇文章主要介紹了vue?使用el-table循環(huán)輪播數(shù)據(jù)列表的實(shí)現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用el-table循環(huán)輪播數(shù)據(jù)列表

因?yàn)槭窃趦?nèi)網(wǎng)開發(fā)，安裝插件導(dǎo)包進(jìn)去非常麻煩，有條件的可以去下載插件實(shí)現(xiàn)，咱這里貼一下手?jǐn)]的代碼。

需要實(shí)現(xiàn)的效果大抵如下：（手機(jī)拍的，有些糊）

大部分實(shí)現(xiàn)的是監(jiān)聽是否到了div的底部，如果到了底部，就直接跳到頂部，這種體驗(yàn)感不是特別好，沒有達(dá)到輪播的真正效果。

表格數(shù)據(jù)，devData我綁定了個空數(shù)組，因?yàn)閷?shí)在是懶得敲了，按道理排名也應(yīng)該是從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="地區(qū)" 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(){//鼠標(biāo)移入清除定時器（暫停輪播）
? ? ? ? clearInterval(this.dibiao_clear)
? ? ?},
? ? ?leave_dibiao(){//鼠標(biāo)移出繼續(xù)執(zhí)行輪播
? ? ? ? this.tableData_dibiao()
? ? ?}, ? ? ? ?

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: