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