废话不多说 直接上代码!!!!
<template>
<div style="width: 100%;height: 300px;">
<el-table
v-loading="loading"
:data="tableData"
:height="'100%'"
ref="scroll_Table"
@mouseenter.native="autoScroll(true)"
@mouseleave.native="autoScroll(false)"
>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
tableData: [
{
date: '2016-05-02',
name: '王小鼠',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小牛',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小兔',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小龙',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小蛇',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小马',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小羊',
address: '上海市普陀区金沙江路 1516 弄'
},
{
date: '2016-05-02',
name: '王小猴',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小鸡',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小狗',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小猪',
address: '上海市普陀区金沙江路 1516 弄'
},
],
loading: false,
scrolltimer: '', // 自动滚动的定时任务
}
},
mounted () {
const _that = this
setTimeout(() => {
_that.autoScroll()
}, 500)
},
methods: {
// 设置自动滚动
autoScroll(stop) {
const table = this.$refs.scroll_Table
// 拿到表格中承载数据的div元素
const divData = table.$refs.bodyWrapper
// 拿到元素后,对元素进行定时增加距离顶部距离,实现滚动效果(此配置为每100毫秒移动1像素)
if (stop) {
//再通过事件监听,监听到 组件销毁 后,再执行关闭计时器。
window.clearInterval(this.scrolltimer)
} else {
this.scrolltimer = window.setInterval(() => {
// 元素自增距离顶部1像素
divData.scrollTop += 1
// 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
// 重置table距离顶部距离
divData.scrollTop = 0
// 重置table距离顶部距离。值=(滚动到底部时,距离顶部的大小) - 整个高度/2
// divData.scrollTop = divData.scrollTop - divData.scrollHeight / 2
}
}, 50) // 滚动速度
}
}
}
}
</script>
<style lang="scss" scoped>
</style>