vxe-table vxe-list vue 实现下拉框的虚拟列表
虚拟列表的实现原理:只渲染可视区的 dom 节点,其余不可见的数据卷起来,只会渲染可视区域的 dom 节点,提高渲染性能及流畅性,优点是支持海量数据的渲染;当然也会有缺点:滚动效果相对略差(海量数据与滚动效果的取舍问题就看自己的需求喽);

<div class="my-select">
   <input type="text" class="my-select-input" readonly>
    <vxe-list class="my-select-wrapper" :loading="loading" :data="list">
        <template v-slot="{ items }">
            <div class="my-select-option" v-for="item in items" :key="item.value">{{ item.label }}</div>
        </template>
    </vxe-list>
</div>
export default {
	data () {
		return {
	      loading: false,
	      list: []
	    }
	},
	created () {
	    this.loading = true
        setTimeout(() => {
            const startTime = Date.now()
            var list = []
            for(var i=0;i<100000;i++){
                list.push({
                    label: '选项'+i,
                    value: i
                })
            }
            this.list = list
            this.loading = false
            this.$nextTick(() => {
                this.$XModal.message({ message: `渲染 ${list.length} 行,用时 ${Date.now() - startTime}毫秒`, status: 'info' })
            })
        }, 200)
	}
}
.my-select {
    width: 200px;
    position: relative;
    background-color: #fff;
}

.my-select-input {
    width: 100%;
    height: 24px;
    border: 1px solid #dcdfe6;
}

.my-select-wrapper {
    position: absolute;
    left: 0;
    top: 26px;
    width: 100%;
    height: 200px;
    background-color: #fff;
    border: 1px solid #dcdfe6;
}

.my-select-option:hover {
    background-color: #f5f7fa;
    cursor: pointer;
}

在这里插入图片描述

接下来测试一下:
渲染 1w 条只需要 150 毫秒左右
渲染 5w 条只需要 300 毫秒左右
渲染 10w 条只需要 500 毫秒左右

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

Logo

前往低代码交流专区

更多推荐