vxe-table vxe-list vue 实现虚拟列表、虚拟滚动、滚动渲染
虚拟列表的实现原理:只渲染可视区的 dom 节点,其余不可见的数据卷起来,只会渲染可视区域的 dom 节点,提高渲染性能及流畅性,优点是支持海量数据的渲染;当然也会有缺点:滚动效果相对略差(海量数据与滚动效果的取舍问题就看自己的需求喽);
<vxe-list height="240" class="my-list" :loading="loading1" :data="list1">
<template v-slot="{ items }">
<div class="my-list-item" v-for="(item, index) in items" :key="index">{{ item.label }}</div>
</template>
</vxe-list>
export default {
data () {
return {
loading: false,
list: []
}
},
created () {
this.loading = true
setTimeout(() => {
var list = []
for(var index = 0; index < 100000; index++){
list.push({
id: index,
label: `row_${index}`
})
}
const startTime = Date.now()
this.list1 = list
this.loading = false
this.$nextTick(() => {
console.log(`渲染完成 ${Date.now() - startTime} 毫秒`)
})
}, 300)
}
}
接下来测试一下:
渲染 1w 条只需要 150 毫秒左右
渲染 10w 条只需要 500 毫秒左右
渲染 20w 条只需要 800 毫秒左右