vue el-select 如何實(shí)現(xiàn)一個(gè)滾動(dòng)加載更多下拉選項(xiàng)的自定義指令

沒(méi)有什么講究，直接上代碼

1. 模板部分

   <el-select
              v-model="operator"
              filterable
              remote
              size="small"
              reserve-keyword
              placeholder="請(qǐng)輸入經(jīng)辦人姓名"
              :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編寫(xiě)

  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. 調(diào)用的處理函數(shù)

loadMore() {
      //分頁(yè)家內(nèi)容
     //TODO 請(qǐng)求借口
   },