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实现循环轮播数据列表”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！