element+vue可遠程搜索可懶加載的下拉框組件

組件內容：

<template>
      <el-select
        v-model="value[sty]"
        :placeholder="tag"
        clearable
        filterable
        v-el-select-loadmore="loadmore"
        remote
        @focus="handlefocus"
        @change="slechange"
        :remote-method="remoteMethod"
        :loading="loading"
        size="mini"
        style="width:90px;display:inline;"
        class="select"
      >
        <el-option
          v-for="(option, index) in obj"
          :key="tag+index"
          v-bind:value="option.value"
          v-bind:label="option.label"
        ></el-option>
      </el-select>
</template>

<script>
export default {
  // 滑動加載更多時，判斷下拉框是否觸底決定是否加載更多
  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 {
      formData: {
        page: 1,
        pagesize: 20
      },
      obj: [],
      loading: false,
      value: {},
      canshu: {}
    }
  },
  created() {
    this.value = Object.assign({}, this.dataForm)
  },
  beforeMount() {
    this.$nextTick(() => {
      this.value = Object.assign({}, this.dataForm) // 表單數據到組件顯示的過渡
      this.formData = { page: 1, pagesize: 20 }
      this.formData.dxid = this.dataForm[this.sty] // 設定表單需要值為dxid,由dxid反查dxmc進行回顯
      this.getArrs(this.formData) // 數據進行回顯（dxid---label的顯示）
    })
  },
  props: {
    tag: { type: String },
    sty: { type: String },
    srcouse: { type: String }, // 下拉框接口對應的代表字符串(類似key-value中的key)
    dataForm: { type: Object }
  },
  methods: {
    // 選擇值時給父組件傳值
    slechange() {
      var prame = {}
      prame[this.sty] = this.value[this.sty]
      this.$emit('recanshu', prame)
    },
    // 相當於翻頁查詢
    loadmore(val) {
      this.formData.page++
      this.getArrs(this.formData)
    },
    // 查詢接口
    getArrs(data) {
      this.api.get(this, this.srcouse, (res) => { // 接口條用經封裝
        res.list.forEach((item) => {
          this.obj.push({
            label: item.dxmc, // 假定接口返回數據形式為{ dxid: '', dxmc: '' }形式，具體情況具體變化
            value: item.dxid
          })
        })
      }, data)
    },
    // 點擊-初始化下拉框
    handlefocus() {
      this.formData.dxid = ''
      this.formData.page = 1
      this.obj = []
      this.getArrs()
    },
    // 條件搜索
    remoteMethod(query) {
      this.formData.dxmc = query
      this.obj = []
      this.getArrs(this.formData)
    }
  }
}
</script>

組件使用：

            <SELECT sty="dxid" tag="河流水庫"  srcouse="fxkh_hlsk" :dataForm='sqform' @recanshu='recanshu' />
            <!-- dxid     表單需要字段 -->
            <!-- tag      表單項label -->
            <!-- srcouse  下拉框接口名 -->
            <!-- dataForm 表單綁定值 -->
            <!-- recanshu 選定值時組件value到表單的過渡 -->
    recanshu(prame) {
      this.sqform = Object.assign(this.sqform, prame)
    },