引入element中的select选择器
<el-select
v-model="params.q"
filterable
remote
:reserve-keyword="false"
placeholder="请输入关键字"
clearable
:remote-method="remoteMethod"
:loading="loading"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
在js中设置通过输入关键字以从远程服务器中查找数据
const options = ref<ListItem[]>([]); //select下拉数据
const loading = ref(false); //获取数据时加载状态
let selectData = []; //存储接口获取的数据
//这里是请求所需的参数
const variables = ref({
first: 0,
pageSize: 1000,
q: "",
});
//remote-method为一个Function,它会在输入值发生变化时调用,参数为当前输入值
const remoteMethod = (query: string) => {
if (query) {
loading.value = true;
variables.value.q = query;
//我这里使用了graphql请求,只需要将请求获取的数据赋值给selectData
const { refetch, onResult } = useQuery(queryProjectImage, variables, {
fetchPolicy: "no-cache",
});
onResult((res) => {
loading.value = false;
selectData = res.data?.QueryProjectImage.data;
//这里将数据重组
options.value = selectData.map((item) => ({
value: `${item.mpImage.id}`,
label: `${item.filename}`,
}));
});
} else {
options.value = [];
}
};
//这里是需要传给父组件的数据来进行搜素
const params: SampleSearch = reactive({
q: "",
date: undefined,
setType: undefined,
status: undefined,
});
const emit = defineEmits(["onQuery"]);
const onSubmit = () => {
emit("onQuery", params);
console.log(params);
};
defineExpose({ onSubmit });
功能实现如下: