问题:当后端一次性返回数据(array)过多时(例如1000条或者更多),会导致页面卡顿
优化思路之方案一:(推荐使用)
思路:利用插件pl-table
解决方案:https://developer.aliyun.com/mirror/npm/package/pl-table
示例:请看官方文档,里面描述很清楚,就不重复说了
推荐理由:dom结构固定,不是累加似加到页面
注意:基于element-ui但是不代表你需要安装element-ui才能使用pl-table,你可以不安装任何UI库,就可以使用pl-table。但是必须在集成vue框架下使用
优化思路之方案二:
思路:将这1000条数据划分为多个小数组,然后一段一段的加到页面上
解决方案:利用window.requestAnimationFrame()或者setInterval()
示例:以window.requestAnimationFrame()为例
window.requestAnimationFrame()
告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行;
// data为所有数据的数组,callback 拿到当前数据要做的操作 ,pageSize 一次取多少条
UtilHandleBigData(data, callback, pageSize = 20) {
const totalCount = data.length // 共多少条
// 可分多少页,就是分割为多少个小数组
const totalPageNumer = Math.ceil(totalCount / pageSize)
let currentPageNumber = 1 // 当前页数
const handler = () => {
const start = (currentPageNumber - 1) * pageSize
const end = currentPageNumber * pageSize
const currentData = data.slice(start, end) // 当前页的数据
if (typeof callback === 'function') {
callback(currentData, {
totalCount,
totalPageNumer,
currentPageNumber,
pageSize
})
}
if (currentPageNumber < totalPageNumer) {
window.requestAnimationFrame(handler)
}
currentPageNumber++
}
handler()
}
使用
let allData = [0, 1, 2, ......]; // 接口所得的所有数据
let tableData = []; // 显示在页面的列表
UtilHandleBigData(allData, (data) => {
tableData.push(...data);
}
优化思路之方案三:
思路:写个vue指令,给table滚动区域添加指令,绑定方法,达到要求,就滚动加载数据
用法:
// directive.js文件
Vue.directive('loadMore', {
bind(el, binding) {
const bodyWrapper = el.querySelector('.el-table__body-wrapper')
bodyWrapper.addEventListener('scroll', function() {
const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
// 触底加载下一页
if (scrollDistance <= 10) {
binding.value()
}
})
}
})
然后再去main.js文件里注册
…………
import * as directives from '@/directive'
// 注册
Vue.use(directives)
具体文件使用
<template>
<el-table
:data="tableData"
v-loadMore="loadMore"
>
………………
</el-table>
</template>
<script>
export default {
data() {
allData: [], // 所有数据
tableData: [], // 当前显示的数据
pageNum: 1, // 当前页数
pageSize: 10 // 一次性展示多少条数据
}
methods: {
loadMore() {
if (this.pageNum * this.pageSize < this.allData.length) {
this.pageNum++
this.tableData= this.allData.slice(0, this.pageNum * this.pageSize)
}
}
}
}
</script>