element table 滚动加载 、避免超大表格数据 卡顿

发表时间:2020-05-14 04:30:20
摘要信息

element table 如何做滚动加载 、避免超大表格数据 卡顿问题

使用 pl-table这个插件

npm install pl-table

表格

<pl-table :datas="cardList" height="480" ref="pltable">
<pl-table-column label="序号" prop="index" width="60"/>
<pl-table-column label="卡密" prop="key"/>
<pl-table-column label="类型" prop="type">
<template slot-scope="scope">
<el-select style="width: 100%" v-model="scope.row.type" placeholder="类型">
<el-option :label="item.label" :key="index" :value="item.value"
v-for="(item,index) in type" disabled></el-option>
</el-select>
</template>
</pl-table-column>
</pl-table>

接口请求 获得 list这个数组对象

this.cardBigList = []
this.cardList = []
if (list.length > 200) {
this.cardBigList = list
this.cardList = list.splice(0, 200)
} else {
this.cardList = list
}

稍做判断,如果长度大于200 就 先放200,然后再加载余下的

全局的table滚动条下滑到底加载状态控制

load: false

给表格绑定上滚动监听事件

let that = this
let begin = async () => {
that.load = true
let data = that.cardBigList.splice(0,50)
console.log(that.cardBigList)
for (let i in data) {
await handleSet(data[i])
}
}
let handleSet = (data) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
that.cardList.push(data)
resolve(true)
}, 10)
})
}
let dom = that.$refs['pltable'].$el.querySelector('.el-table__body-wrapper')
dom.addEventListener('scroll', function (e) {
if (dom.scrollTop + dom.clientHeight === dom.scrollHeight) {
console.log('scroll', dom.scrollTop)
if (!that.load) {
begin().then(res => {
that.load = false
})
}
}
})

写了个队列插入可以设置settimeout,每次触发滚动条到底事件,都只会触发一次往表格中添加数据的操作,这样就不会使浏览器处理过多的添加数据任务,虽然加载的比较慢,但是比起一次性全部加载到表格稳定多了。


40% Complete (success)