问题:使用 el-select
做下拉选择,只设置filterable
,下拉数据量少没有问题,但如果下拉的数据量很大,会导致卡顿甚至卡死。
解决方法:使用remote
解决
在el-select
属性里增加如下代码
remote
remote-show-suffix
:remote-method="filterFn"
js 中增加
const filterFn = (query) => {
if (query !== '') {
options.value = list.filter(item => item.label.toLowerCase().includes(query.toLowerCase()))
} else {
options.value = list
}
}
完整代码如下
<template>
<el-select
v-model="value"
filterable
remote
remote-show-suffix
:remote-method="filterFn"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
<script setup>
import { ref } from 'vue'
const list = [] // 这里存放所有的数据
const options = ref([]) // 这里存放过滤后的数据
const filterFn = (query) => {
if (query !== '') {
options.value = list.filter(item => item.label.toLowerCase().includes(query.toLowerCase()))
} else {
options.value = list
}
}
</script>