|
@@ -13,7 +13,10 @@ const debouncedFn = useDebounceFn(() => {
|
|
|
const props = withDefaults(defineProps<ApiSelectProps>(), {
|
|
|
immediate: true,
|
|
|
resultFeild: 'data',
|
|
|
- clearable: true
|
|
|
+ clearable: true,
|
|
|
+ pagination: false,
|
|
|
+ pageNumFeild: 'current',
|
|
|
+ pageSizeFeild: 'size'
|
|
|
});
|
|
|
|
|
|
const fetchLoading = ref(false);
|
|
@@ -22,6 +25,8 @@ const options = ref<Recordable[]>([]);
|
|
|
const modelVlaue = defineModel<Array<string | number> | string | number | null>();
|
|
|
const isFirstReq = ref(false);
|
|
|
const searchText = ref('');
|
|
|
+const total = ref(0);
|
|
|
+const page = ref(1);
|
|
|
const bindValue = computed(() => {
|
|
|
return {
|
|
|
...props,
|
|
@@ -37,17 +42,26 @@ async function fetchApi() {
|
|
|
};
|
|
|
if (unref(bindValue).filterFeild && unref(searchText)) {
|
|
|
params[String(unref(bindValue).filterFeild)] = unref(searchText);
|
|
|
- console.log(params, 'apiselect请求参数');
|
|
|
+ // console.log(params, 'apiselect请求参数');
|
|
|
+ }
|
|
|
+ if (unref(bindValue).pagination) {
|
|
|
+ params[unref(bindValue).pageNumFeild] = unref(page);
|
|
|
+ params[unref(bindValue).pageSizeFeild] = 10;
|
|
|
}
|
|
|
const res = await api(params);
|
|
|
- options.value = get(res, props.resultFeild);
|
|
|
+
|
|
|
+ options.value = unref(bindValue).pagination ? [...options.value, ...res.data.records] : get(res, props.resultFeild);
|
|
|
fetchLoading.value = false;
|
|
|
+ if (unref(bindValue).pagination) {
|
|
|
+ total.value = res.data.total;
|
|
|
+ }
|
|
|
}
|
|
|
onMounted(() => {
|
|
|
if (unref(bindValue).immediate) {
|
|
|
fetchApi();
|
|
|
}
|
|
|
});
|
|
|
+
|
|
|
function handleFocus() {
|
|
|
if (!unref(bindValue).immediate && !unref(isFirstReq)) {
|
|
|
fetchApi();
|
|
@@ -60,7 +74,13 @@ function handleFocus() {
|
|
|
function handleScroll(e: Event) {
|
|
|
const currentTarget = e.currentTarget as HTMLElement;
|
|
|
if (currentTarget.scrollTop + currentTarget.offsetHeight >= currentTarget.scrollHeight) {
|
|
|
- // console.log('到底了');
|
|
|
+ console.log('到底了');
|
|
|
+ if (options.value.length < total.value && !fetchLoading.value) {
|
|
|
+ console.log('请求数据');
|
|
|
+ fetchLoading.value = true;
|
|
|
+ page.value += 1;
|
|
|
+ fetchApi();
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
function handleSearch(value: string) {
|