使用filter-method过滤展示信息,当有查询的内容,将存储的数据拿出来过滤,没有的时候默认展示前200条数据。
<el-select
placeholder="请选择"
v-model="modelValue"
:filter-method="filterCheckPerOptions"
filterable
multiple
>
<el-option
v-for="(item,index) in selectData"
:key="index"
:value="item.nickName"
:label="item.nickName"
>
</el-option>
</el-select>
<script lang="ts">
import { defineAsyncComponent,defineComponent, reactive,onMounted,toRefs } from "vue";
export default defineComponent({
setup(props) {
const state = reactive<any>({
modelValue:'',
copyData:[],//存储数据
selectData:[],//展示数据
});
onMounted(()=>{
getData()
})
function getData(){
// api请求下拉数据
api().then(res => {
state.copyData = res.data
state.selectData = res.data.slice(0, 200);
})
}
function filterCheckPerOptions(query:string){
var arr = state.copyData.filter((item:any) => {
return item.nickName.includes(query);
});
if (arr.length > 201) {
state.selectData = arr.slice(0, 200);
} else {
state.selectData = arr;
}
}
return {
...toRefs(state),
filterCheckPerOptions
};
},
});
</script>