vxe-list vue 实现虚拟列表、虚拟滚动、滚动渲染

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 毫秒左右

具体用法可以去看 官方文档，在线运行 http://jsrun.net/GSfKp/edit