300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue3使用ant-design的select实现下拉框滚动分页加载

vue3使用ant-design的select实现下拉框滚动分页加载

时间:2023-12-21 02:13:05

相关推荐

vue3使用ant-design的select实现下拉框滚动分页加载

实现下拉框滚动加载远程数据

<a-selectv-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 = 1pageSize.value = pageSize.value + 20getList()}}}// 远程搜索const searchKey = ref('')const searchMerchantList = debounce((val: string) => {pageNum.value = 1pageSize.value = 10searchKey.value = valgetList(val)}, 500);// 关闭下拉框时,如果存在搜索关键字,则证明有搜索记录,需要重新发起请求,获取原始值const dropdownVisibleChange = (open: boolean) => {if (!open && searchKey.value) {searchKey.value = ''pageNum.value = 1pageSize.value = 10getList()}};return {merchantListOptions,selectedValue,isLoading,deleteSelect,popupScroll,clickOption,select,searchMerchantList,dropdownVisibleChange,selectedOptions,}}})</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。