纯记录
需求:输入“商品”,下拉实时查询内容,选择对应商品内容
效果ant组件实例有
相关代码
<a-form-item name="name">
<a-select
v-model:value="formState.name"
:default-active-first-option="false"
:filter-option="false"
:not-found-content="null"
:options="options"
:show-arrow="false"
placeholder="请输入名称"
show-search
style="width: 250px"
@search="handleSearch"
>
</a-select>
</a-form-item>
const options = ref([]);
const formState = reactive({
name: null,
});
//下拉列表
const List = async (str) => {
const res = await Api.page({
Title: str,
});
res.list.forEach((item) => {
options.value.push({
value: item.uuid,
label: item.name,
});
});
};
//下拉模糊查询
const handleSearch = (val) => {
options.value = [];
List(val);
};
return{
handleSearch,
}
升级版(从html到js全部代码)
<a-form-item label="名称" name="uuid">
<a-select
v-model:value="formStateuuid"
show-search
placeholder="请输入名称"
style="width: 300px"
:filter-option="false"
:options="state.list"
@search="loadCollection"
>
<template v-if="state.loading" #notFoundContent>
<a-spin size="small" />
</template>
</a-select>
</a-form-item>
import { debounce } from "lodash-es";
//下拉列表
const state = reactive({
list: [],
map: {},
loading: false,
});
//下拉模糊查询
const load = debounce(async (value) => {
if (state.loading) {
return;
}
try {
state.loading = true;
state.list = [];
const res = await Api.page({
Title: value,
});
const map = {};
state.list = res.list?.map((item) => {
map[item.uuid] = item;
return {
value: item.uuid,
label: item.name,
};
});
state.map = map;
} finally {
state.loading = false;
}
}, 500);
onMounted(() => {
loadPage();
load();
});
return{
loadCollection,
collectionsState,
}