directive指令设置下拉加载

//注册element-ui的加载更多
Vue.directive("selectmore", {
    bind(el, binding) {
        const selectWrap = el.querySelector(".el-scrollbar__wrap");
        selectWrap.addEventListener("scroll", function() {
            let sign = 50;
            const scrollDistance =
                this.scrollHeight - this.scrollTop - this.clientHeight;

            if (scrollDistance <= sign) {
                binding.value();
            }
        });
    }
});

<el-select
        class="search-input"
        size="medium"
        v-model="searchContent"
        filterable
        remote
        @focus="querySearchAsync('')"
        :remote-method="querySearchAsync"
        placeholder="请输入内容"
        v-selectmore="loadMore"
        @change="handleSelect">
          <el-option v-for="(item, index) in arrItem" :key="index" 
          :label="item.label" 
          :value="item" 
          :disabled="item.disabled"></el-option>
</el-select>

    loadMore() {
            // 下拉加载
        },

image.png image.png