antdv 下拉懒加载

ant-design-vue没有直接可以使用的下拉分页功能，但是有支持popupScroll事件，可通过这个事件来处理下拉分页懒加载，避免一次性加载全部列表造成卡顿问题，代码如下，自己封装的组件

<template>
    <a-select
    	show-search
        allowClear
        :mode="mode"
        @popupScroll="handlePopupScroll"
        option-filter-prop="children"
        v-model="checkedValue"
        :placeholder="placeholder"
        @search="search"
    >
        <a-select-option
            v-for="item in list"
            :key="item[key]"
            :value="item[key]"
        >{{ item[label] }}
        </a-select-option>
    </a-select>
</template>

<script>
export default {
    name: 'selectLazy',
    props: {
        pageSize: {
            type: Number,
            default: 30
        },
        searchType: {
            type: String,
            default: 'name'
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        mode: {
            type: String,
            default: 'default'
        },
        list: {
            type: Array,
            default: []
        },
        key: {
            type: String,
            default: 'uid'
        },
        label: {
            type: String,
            default: 'name'
        }
    },
    data(){
        return{
            pageIndex:1,
            searchString: "",
            searchTimer: null,
            checkedValue: "",
        }
    },
    created() {
        if(this.mode === 'multiple'){
            this.checkedValue = []
        };
        this.getList();
    },
    methods:{
        handlePopupScroll(e){
            const { scrollHeight, scrollTop, clientHeight } = e.target;
            if(scrollHeight - scrollTop === clientHeight){
                this.pageIndex++;
                this.getList();
            }
        },
        search(val){
            let self = this;
            this.searchString = val;
            if(this.searchTimer){
                clearTimeout(this.searchTimer)
            };
            this.searchTimer = setTimeout(() => {
                self.getList();
            }, 500)
        },
        getList(){
            let data = {
                page_size: this.pageSize,
                page_index: this.pageIndex
            };
            if(this.searchString){
                data.where_and = [[this.searchType,'like',`%${this.searchString}%`]]
            }
            this.$emit('getList',data)
        }
    }
}
</script>

下拉懒加载功能实现完成，但是下拉懒加载有个弊端，只能用在表单提交里面，如果用在页面编辑，就是已经有默认选中的，当选中内容不在默认加载的列表数据中时就会出现选中的内容在列表表找不到，输入框内显示的就只有value，无法正确显示label了。

总的来说，没实现我业务上的需求，但还是有点用处的，特此做个记录。