vue3使用ant-design的select实现下拉框滚动分页加载
vue3配合ant-design的select实现下拉框滚动分页加载
·
实现下拉框滚动加载远程数据
<a-select
v-model:value="formState.merchantName"
mode="multiple"
style="width: 100%;"
:defaultOpen="false"
placeholder="请选择客户名称"
:filter-option="false"
@deselect="deleteSelect"
@popupScroll="popupScroll"
@select="select"
@dropdownVisibleChange="dropdownVisibleChange"
@search="searchMerchantList"
>
<template #menuItemSelectedIcon>
<my-icon style="margin: 0 5px;" type="icon-check"></my-icon>
</template>
<a-select-option
@click="clickOption(item)"
:key="item.value"
:value="item.value"
v-for="item in merchantListOptions"
:disabled="item.contained === 1">
{{item.label}}
</a-select-option>
</a-select>
数据逻辑,未补全的参数请根据需要自行添加,以下代码仅展示关键逻辑
<script lang="ts">
import { defineComponent, reactive, ref, watch, nextTick } from 'vue';
export default defineComponent({
const totalCount = ref(0)
const pageNum = ref(1)
const pageSize = ref(10)
const isLoading = ref(false)
// 查询数据
const getList = (merchantName = '') => {
isLoading.value = true
// 异步获取远程数据
isLoading.value = false
};
// 滚动加载
const popupScroll = (e: any) => {
const { target } = e;
// 滚动 触底 看接口是否还有剩余的值没传过来
if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
if (pageNum.value * pageSize.value < totalCount.value) {
// 每滚动一次,多加载20条数据
pageNum.value = 1
pageSize.value = pageSize.value + 20
getList()
}
}
}
// 远程搜索
const searchKey = ref('')
const searchMerchantList = debounce((val: string) => {
pageNum.value = 1
pageSize.value = 10
searchKey.value = val
getList(val)
}, 500);
// 关闭下拉框时,如果存在搜索关键字,则证明有搜索记录,需要重新发起请求,获取原始值
const dropdownVisibleChange = (open: boolean) => {
if (!open && searchKey.value) {
searchKey.value = ''
pageNum.value = 1
pageSize.value = 10
getList()
}
};
return {
merchantListOptions,
selectedValue,
isLoading,
deleteSelect,
popupScroll,
clickOption,
select,
searchMerchantList,
dropdownVisibleChange,
selectedOptions,
}
}
})
</script>
更多推荐
已为社区贡献7条内容
所有评论(0)