el-select 드롭다운 상자는 페이징 데이터를 처리하고 더 많은 것을 로드하기 위해 바닥으로 나갑니다.

1. 맞춤 지침을 선언합니다.

directives: {
    'loadmore': {
        inserted(el, binding) {
            const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
            SELECTWRAP_DOM.addEventListener('scroll', function() {
                const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                if (condition) {
                    binding.value();
                }
            });
        }
    }
},

2. 사용자 정의 명령어 v-loadmore를 사용합니다.

<el-select filterable v-model="form.standardDevice" placeholder="请选择" clearable v-loadmore="loadMore" @change="handleChange">
   <el-option v-for="item in deviceList" :key="item.deviceId" :label="item.deviceName" :value="item.serialNumber"></el-option>
   <el-option v-if="selectLoading" v-loading="selectLoading" value=""></el-option>
</el-select>

3. 데이터 로드 요청 보내기

//滚动条滚动到底部
loadMore(){
    //页数加一
    this.pageNum ++ 
    //发送网络请求
    this.getDeviceList()
},

참조: el-select는 아래쪽으로 스크롤하여 더 많은 것을 로드합니다(페이지 로딩 데이터)_el-select는 아래쪽으로 스크롤하여 페이지를 로드합니다_Tiandao는 Qin_Lu의 블로그-CSDN 블로그를 보상합니다.