vxe-select 下拉列表使用虚拟滚动加载上万选项列表
正常使用下拉框加载上万列表选项非常卡,使用虚拟滚的的下拉框之后就可以毫秒加载 50万行下拉选项
<template>
<div>
<p>
<vxe-button @click="loadData(100)">加载1百条</vxe-button>
<vxe-button @click="loadData(500)">加载5百条</vxe-button>
<vxe-button @click="loadData(1000)">加载1千条</vxe-button>
</p>
<vxe-select v-model="val1" :options="opts1" :loading="loading" clearable filterable>
<vxe-option v-for="item in opts1" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
</vxe-select>
</div>
</template>
<script>
export default {
data () {
return {
val1: null,
loading: false,
opts1: []
}
},
methods: {
loadData (size) {
const list = []
this.loading = true
for (let i = 0; i < size; i++) {
list.push({
value: `${i}`,
label: `选项 ${i}`
})
}
setTimeout(() => {
this.opts1 = list
this.loading = false
}, 300)
}
},
created () {
this.loadData(50)
}
}
</script>