el-select element 选择器懒加载,滚动加载

在这里插入图片描述

<el-form-item label="业务主题:" prop="theme" required>
  <el-select v-model="ruleForm.theme" 
  		:placeholder="language.matter_theme" 
  		v-el-select-loadmore="loadMoreTheme" class="w-600">
        <el-option
                v-for="item in themeList"
                :key="item.domainId"
                :label="item.domainName"
                :value="item.domainId">
        </el-option>
    </el-select>
</el-form-item>


export default {
    
    
        name: "",
        directives: {
    
    
            'el-select-loadmore': {
    
    
                bind(el, binding) {
    
    
                    // 获取element-ui定义好的scroll盒子
                    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap');
                    SELECTWRAP_DOM.addEventListener('scroll', function () {
    
    
                        /**
                         * scrollHeight 获取元素内容高度(只读)
                         * scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
                         * clientHeight 读取元素的可见高度(只读)
                         * 如果元素滚动到底, 下面等式返回true, 没有则返回false:
                         * ele.scrollHeight - ele.scrollTop === ele.clientHeight;
                         */
                        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight;
                        if (condition) {
    
    
                            binding.value();
                        }
                    });
                }
            }
        },
        data(){
    
    
            return{
    
    
                language:language,
                projectConfig:projectConfig,
                loading:false,
                pageDataTheme: {
    
    
                    pageNum: 1,
                    pageSize: 20,
                },//选择器滚动加载
                themeList:[],//列表
                }
         }
},
methods:{
    
    
			/**
             * 列表懒加载
             */
            loadMoreTheme() {
    
    
                this.pageDataTheme.pageNum++;
                this.getThemeList();
            },
			/**
             * 获取列表
             */
            getThemeList(){
    
    
                this.loading = true;
                axios.get(`/matter/themeList`, {
    
    params: this.pageDataTheme}).then(res=>{
    
    
                    this.loading=false;
                    if(res.data && res.data.response){
    
    
                    //滚动到底部就调一次接口,将请求过的数据和本次调的数据合并得到全部数据
                        this.themeList = this.themeList.concat(res.data.response.content);
                    }
                }).catch(e => {
    
    
                    this.loading=false;
                    if(e.data && e.data.errorCode) {
    
    
                        this.failTip(dictionary[e.data.errorCode])
                    } else {
    
    
                        this.failTip(language.error_500)
                    }
                });
            },
},
mounted(){
    
    
     this.getThemeList();
}

猜你喜欢

转载自blog.csdn.net/yxgd_1442962728/article/details/110521313