ant-design-vue/components/select/demo/select-users.vue

84 lines
1.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<docs>
---
order: 10
title:
zh-CN: 搜索用户
en-US: Search and Select Users
---
## zh-CN
一个带有远程搜索节流控制请求时序控制加载状态的多选示例
## en-US
A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
</docs>
<template>
<a-select
v-model:value="value"
mode="multiple"
label-in-value
placeholder="Select users"
style="width: 100%"
:filter-option="false"
:not-found-content="fetching ? undefined : null"
:options="data"
@search="fetchUser"
>
<template v-if="fetching" #notFoundContent>
<a-spin size="small" />
</template>
</a-select>
</template>
<script>
import { defineComponent, reactive, toRefs, watch } from 'vue';
import { debounce } from 'lodash-es';
export default defineComponent({
setup() {
let lastFetchId = 0;
const state = reactive({
data: [],
value: [],
fetching: false,
});
const fetchUser = debounce(value => {
console.log('fetching user', value);
lastFetchId += 1;
const fetchId = lastFetchId;
state.data = [];
state.fetching = true;
fetch('https://randomuser.me/api/?results=5')
.then(response => response.json())
.then(body => {
if (fetchId !== lastFetchId) {
// for fetch callback order
return;
}
const data = body.results.map(user => ({
label: `${user.name.first} ${user.name.last}`,
value: user.login.username,
}));
state.data = data;
state.fetching = false;
});
}, 300);
watch(state.value, () => {
state.data = [];
state.fetching = false;
});
return {
...toRefs(state),
fetchUser,
};
},
});
</script>