vue 使用el-table循环轮播数据列表的实现
短信预约 -IT技能 免费直播动态提醒
使用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()
}, 以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341