vue el-select封装一个滚动加载更多下拉选项的自定义指令

没有什么讲究，直接上代码

1. 模板部分

   <el-select
              v-model="operator"
              filterable
              remote
              size="small"
              reserve-keyword
              placeholder="请输入经办人姓名"
              :remote-method="remoteOperate"
              @change="selectOperateBlur"
              v-load-more="loadMore"
          >
            <el-option
                v-for="item in operatorList"
                :key="item.operator_user_id"
                :label="item.operator_true_name"
                :value="item.operator_user_id"
            >
            </el-option>
 </el-select>

2. 自定义指令v-load-more编写

  directives: {
    loadMore: {
      bind: function (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();
          }
        });
      },
    },
  },

3. 调用的处理函数

loadMore() {
      //分页家内容
     //TODO 请求借口
   },