How to implement lazy loading in El select (with search function)

<!--
<template>
    <el-select
        :value="value"
        v-loadmore="loadMore"
        @focus="focus"
        @clear="clear"
        filterable
        remote
        :filter-method="handleSearch"
        :loading="loading"
        clearable
        v-bind="$attrs"
        v-on="$listeners"
    >
        <el-option
            v-for="option in data"
            :label="option[dictLabel]"
            :value="option[dictValue]"
            :key="option.value"
        ></el-option>
        <!--  Loaded here value You can set whatever you like , As long as it does not duplicate other data  -->
        <el-option
            v-if="hasMore"
            disabled
            label=" Loading ..."
            value="-1"
        ></el-option>
    </el-select>
</template>

<script>
export default {
    
    props: {
    
        value: {
    
            default: ""
        },
        //  The list of data 
        data: {
    
            type: Array,
            default: () => []
        },
        dictLabel: {
    
            type: String,
            default: "label"
        },
        dictValue: {
    
            type: String,
            default: "value"
        },
        //  Call the interface of page number 
        request: {
    
            type: Function,
            default: () => {
    }
        },
        //  Incoming page number 
        page: {
    
            type: [Number, String],
            default: 1
        },
        //  Is there any more data 
        hasMore: {
    
            type: Boolean,
            default: true
        }
    },
    directives: {
    
        //  Here we implement a custom instruction inside the component 
        loadmore: {
    
            //  Definition of instruction 
            bind(el, binding) {
    
                const SELECTWRAP = el.querySelector(
                    ".el-select-dropdown .el-select-dropdown__wrap"
                );
                if (!SELECTWRAP) {
    
                    throw new Error(' Can't get "el-select-dropdown__wrap" node ');
                }
                SELECTWRAP.addEventListener("scroll", () => {
    
                    // scrollTop  Here, there may be a decimal point in browser scaling , This leads to rolling to the bottom 
                    // scrollHeight  Subtract... When scrolling to the bottom scrollTop , Still greater than clientHeight  Unable to request more data 
                    //  There will be scrollTop Rounding up   Make sure to roll to the bottom , Trigger call 
                    const CONDITION =
                        SELECTWRAP.scrollHeight -
                            Math.ceil(SELECTWRAP.scrollTop) <=
                        SELECTWRAP.clientHeight;
                    // el.scrollTop !== 0  When typing , If there are few search results , So that I don't see the scroll bar , So the CONDITION The result is true, Will execute bind.value(), It should not be executed at this time , Otherwise, the search results do not match 
                    if (CONDITION && SELECTWRAP.scrollTop !== 0) {
    
                        binding.value();
                    }
                });
            }
        }
    },
    data() {
    
        return {
    
            keyword: "", //  Store keywords with 
            loading: false
        };
    },
    methods: {
    
        //  Request data for the next page 
        loadMore() {
    
            //  Without more data , Do not ask for 
            if (!this.hasMore) {
    
                return;
            }
            //  If intercept The attribute is true Do not request data ,
            if (this.loadMore.intercept) {
    
                return;
            }
            this.loadMore.intercept = true;
            this.request({
    
                page: this.page + 1,
                more: true,
                keyword: this.keyword
            }).then(() => {
    
                this.loadMore.intercept = false;
            });
        },
        //  When there is no data in the selected drop-down box , Automatically request the data of the first page 
        focus() {
    
            if (!this.data.length) {
    
                this.request({
     page: 1 });
            }
        },
        handleSearch(keyword) {
    
            this.keyword = keyword;
            this.loading = true;
            console.log(keyword);
            this.request({
     page: 1, keyword: keyword }).then(() => {
    
                this.loading = false;
            });
        },
        //  Delete when selected , If a keyword is requested , Then clear the keyword and request the data on the first page 
        clear() {
    
            if (this.keyword) {
    
                this.keyword = "";
                this.request({
     page: 1 });
            }
        }
    }
};
</script>

Reference article ：
el-select Pull down load