antdv的table因数据量过大导致的卡顿问题及解决
作者：苑某某
这篇文章主要介绍了antdv的table因数据量过大导致的卡顿问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
遇到的问题
antdv的table表格使用时因数据量过大，造成标签页切换卡顿的问题
解决办法
绑定滚动事件，页面只显示在可视区域内的数据，没在可视区域内的数据不予展示，dom元素的scrollHeight和offsetHeight和scrollTop三个值的比较，判断是否滑到底部了或者顶部了，滑到底部或顶部之后，用scrollTo函数改变滚动条的位置，使其可以再次触发滑到顶部或底部，用计数count，下滚一下count++,上滚一下count–，用count来从原数据里slice哪20条数据展示
上代码
mounted () {
document.querySelector('#test table').addEventListener('scroll', this.handleScroll) // 给dom元素绑定scroll事件，可以在mounted的时候就给他绑定
},
methods: {
handleScroll (e) {
this.scrollTop = e.target.scrollTop
this.offsetHeight = e.target.offsetHeight
this.scrollHeight = e.target.scrollHeight
// 不足20条数据，就都展示了就好
if (this.data.length < 20) {
this.dataScroll= this.data
// 滑到顶部也是给个提示
if (this.scrollTop === 0) {
this.$message.warn('您已经滑到顶部了')
}
// 滑到底部还是给个提示
if ((this.scrollTop + this.offsetHeight) >= this.scrollHeight) {
this.$message.warn('没有更多数据了')
}
return
}
// 滑到顶部scrollTop为0
if (this.scrollTop === 0) {
this.selectedRowKeys = []
// 计数变为1，即如果是1就代表滑到顶部了，取0-20条数的告警在可视区域
let scrollCountTop = this.scrollCount
if (this.scrollCount <= 0) {
this.scrollCount = 1
}
if (this.scrollCount === 1) {
this.datascroll= this.data.slice(0, this.numberMaxOverView) // this.numberMaxOverView是要在这一页展示的数据条数
this.$message.warn('您已经滑到顶部了')
} else {
// 如果不是在顶部，根据计数计算展示哪20条数据，同时上滑要将计数减一，将滑条改变位置为了触发下一次到顶部的计算
document.querySelector('#test .test').scrollTo(0, 10)
this.datascroll= this.data.slice(((this.numberMaxOverView * (scrollCountTop - 1) - this.cacheNum)), (this.numberMaxOverView * scrollCountTop))
this.scrollCount--
}
}
// 滑到底部
if ((this.scrollTop + this.offsetHeight) >= this.scrollHeight) {
this.selectedRowKeys = []
// 如果是最后一次数据展示，计算需要展示的条数
let scrollCount = this.scrollCount
let isLastPage = this.numberMaxOverView - (this.data.length - this.scrollCount * (this.datascroll.length - this.cacheNum))
let lastNum = this.scrollCount * (this.data.length - this.cacheNum) - isLastPage
if (isLastPage >= 0) {
this.datascroll= this.data.slice(lastNum - this.cacheNum, this.data.length)
this.$message.warn('没有更多数据了')
} else {
// 如果不是最后一次，根据计数计算展示哪20条数据，同时下滑要将计数加一，将滑条改变位置为了触发下一次底部计算
document.querySelector('#test.demo').scrollTo(0, 100)
// 如果是第一次下滑计算缓存不能再是触顶的0，可以是计算缓存往上10条
if ((this.numberMaxOverView * scrollCount - this.cacheNum) < 0) {
this.datascroll= this.data.slice((this.numberMaxOverView - this.cacheNum), (this.numberMaxOverView * 2))
this.scrollCount++
} else {
this.datascroll= this.data.slice((this.numberMaxOverView * scrollCount - this.cacheNum), (this.numberMaxOverView * (scrollCount + 1)))
this.scrollCount++
}
}
}
}注意
addeventlistener没办法绑定上handlescroll事件，
原因目前碰到的有二：
- 一是你queryselector的时候没找到元素，如果是组件的话去控制台看一下元素的class有没有绑正确，再不然就给个你要绑定的id，在它下边找一找，总之你的dom要绑对；
- 二是你用的组件是否需要给定scrollxy的属性才能绑定scroll事件
可以参考antdv它的list滚动无限加载的思想，如果无需其他操作只是一个list的话也可以用虚拟滚动的组件实现vue-virtual-scroller
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。