el-table循环轮播数据列表
vanora1111 人气:0使用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() },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
加载全部内容