el-select 远程搜索 触底分页搜索

directives: {
    'el-select-loadmore': {
        inserted(el, binding) {
            const SELECTWRAP_DOM = el.querySelector(
                '.el-select-dropdown .el-select-dropdown__wrap'
            );
            SELECTWRAP_DOM.addEventListener('scroll', function() {
                /**
                * console.log(this.scrollHeight,this.clientHeight);
                * 收起时  this.scrollHeight   this.clientHeight  均为0;
                */
                if(this.scrollHeight === 0) return;
                binding.value();
            });
        }
    }
},
/** 
     * 客户搜索框触发远程搜索
     * @params query 客户搜索模糊  参数
     *  */
    remoteMethod(query) {
        /** 滚动条还原 */
        this.$refs.customerRef.$children[1].$children[0].wrap.scrollTop = 0;
        this.$refs.customerRef.$children[1].$children[0].moveY = 0;
        /** 每次输入框内容发生变更---将searchQuery置位 */
        this.searchQuery = query;
        /** 每次触发将页码置位 */
        this.searchPageNum = 1;
        /** 清空备选项 */
        this.customerNameOptions = [];
        /** 如果输入为空格  则不触发查询 */
        if (!String(query).trim()) return;
        let params = this.generateParams();
        params.customerName = query.trim();
        this.searchCustomer(params,1);
    },
    /** 自定义指令-加载更多客户 */
    loadmore() {
        if (!String(this.searchQuery).trim()) return;
        if(this.searchPageNum * 10 > this.customerNum) return;
        this.searchPageNum = this.searchPageNum + 1;
        let params = this.generateParams();
        params.customerName = this.searchQuery.trim();
        params.pageIndex = this.searchPageNum;
        this.searchCustomer(params,2);
    },

你可能感兴趣的:(el-select 远程搜索 触底分页搜索)