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="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)
    },