ant-design-vue 的通过控制a-table的滚动条实现表格滚动效果
鼠标移入滚动条停止滚动,鼠标移出滚动条继续滚动
<template>
<div v-on:mouseout="scrollFun" v-on:mouseover="pauseScroll">
<a-table
:class="'my-index-table tytable1 tableRect'"
ref="table1"
size="small"
rowKey="Id"
:columns="columns1"
:dataSource="dataSource1"
:loading="loading"
:pagination="false"
:scroll="{ y: 200 }"
>
</a-table>
</div>
<template/>
<script>
data() {
return {
loading:false,
columns1:[ {
title: '省份',
dataIndex: 'provinceName',
align: 'center',
width: 65,
ellipsis: true
},
{
title: '地市',
dataIndex: 'cityCountyName',
align: 'center',
width: 65,
ellipsis: true
},
{
title: '县区',
dataIndex: 'countyName',
align: 'center',
width: 65,
ellipsis: true
},],
dataSource1:[
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:1},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:2},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:3},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:4},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:5},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:6},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:8},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:9},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:10},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:11},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:12},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:13},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:14},
{provinceName:'1',cityCountyName:'1',countyName:'1',Id:15},
]
}
},
mounted() {
this.$nextTick(() => {
this.scrollFun()
})
},
methods: {
// 自动滚动
scrollFun() {
// 如果定时器存在
if (this.scrollTimer) {
// 则先清除
clearInterval(this.scrollTimer)
this.scrollTimer = null
}
this.scrollTimer = setInterval(() => {
const scrollHeight = document.querySelectorAll(`.tableRect .ant-table-body`)[0].scrollHeight
const clientHeight = document.querySelectorAll(`.tableRect .ant-table-body`)[0].clientHeight
const scroll = scrollHeight - clientHeight
// 获取当前滚动条距离顶部高度 tableRect是a-table标签名
const scrollTop = document.querySelectorAll(`.tableRect .ant-table-body`)[0].scrollTop
// 向下滚动
if (this.scrollDirection === 'down') {
// 滚动速度
const temp = scrollTop + 10
document.querySelectorAll(`.tableRect .ant-table-body`)[0].scrollTop = temp // 滚动
// 距离顶部高度 大于等于 滚动长度
if (scroll <= temp) {
// 滚动到底部 停止定时器
clearInterval(this.scrollTimer)
this.scrollTimer = null
}
}
}, 300)
},
// 停止滚动
pauseScroll() {
// 定时器不为空
if (this.scrollTimer) {
// 清除定时器
clearInterval(this.scrollTimer)
this.scrollTimer = null
}
},
}
<script/>