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].scrollHeightconst clientHeight = document.querySelectorAll(`.tableRect .ant-table-body`)[0].clientHeightconst scroll = scrollHeight - clientHeight// 获取当前滚动条距离顶部高度tableRect是a-table标签名const scrollTop = document.querySelectorAll(`.tableRect .ant-table-body`)[0].scrollTop// 向下滚动if (this.scrollDirection === 'down') {// 滚动速度const temp = scrollTop + 10document.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/>
