使用elmentui中的el-select实现输入框搜索、滚动加载功能

效果

1、组件代码

<template>
  <div :style="{display:'inline-block', width: width}">
    <el-select
      v-model="c_id"
      v-loadmore="{fn:loadMore ,type:'remoteMethodCustomer'}"
      :style="{'width': width}"
      filterable
      remote
      :remote-method="remoteMethodCustomer"
      :loading="selectLoadingCustomer"
      placeholder="请选择"
      clearable
      @change="selectChange"
      @clear="clear"
    >
      <el-option
        v-for="item in customerData"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
      <div v-if="selectLoadingCustomerAdd && !customerDataNull">
        <span style=" display: flex; justify-content: center;">加载中.....</span>
      </div>
      <div v-if="customerDataNull">
        <span style=" display: flex; justify-content: center;">到底了.....</span>
      </div>
    </el-select>
  </div>
</template>

<script>
import Business from '@/api/business'
import fn from '@/utils/fn'
export default {
  props: {
    width: {
      type: String,
      default: ''
    },
    fatherOption: {
      type: Object,
      default: () => ({})
    },
    cid: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      c_id: '',
      customerData: [],
      remoteMethodCustomerParams: {},
      selectLoadingCustomer: false,
      customerDataNull: false,
      selectLoadingCustomerAdd: false
    }
  },
  watch: {
    fatherOption: {
      immediate: true,
      deep: true,
      handler(val) {
        if (JSON.stringify(val) !== '{}') {
          const existingObject = this.customerData.some(item => item.value === val.value)
          if (!existingObject) {
            this.customerData.push(val)
          }
        }
      }
    },
    cid: {
      immediate: true,
      handler(val) {
        this.c_id = val
      }
    }
  },
  methods: {
    customerDataSelectFn: fn.debounce(async function(params, add) {
      this.selectLoadingCustomerAdd = true
      Business.getCustomerDataResident(params).then(res => {
        const customerData = []
        res.data.forEach(item => {
          customerData.push({
            value: item.id,
            label: '简：' + item.abbr + ' --- ' + '全：' + item.name
          })
        })
        if (customerData.length < 10) {
          this.customerDataNull = true
        } else {
          this.customerDataNull = false
        }
        if (add) {
          this.customerData.push(...customerData)
        } else {
          this.customerData = customerData
        }
        this.selectLoadingCustomerAdd = false
        this.selectLoadingCustomer = false
      })
    }, 200),
    loadMore(type) {
      this.remoteMethodCustomerParams.page++
      this.customerDataSelectFn({ ...this.remoteMethodCustomerParams }, true)
    },
    remoteMethodCustomer(query) {
      const that = this
      if (query !== '') {
        this.selectLoadingCustomer = true
        const params = {
          limit: 10,
          search: query,
          page: 1
        }
        this.remoteMethodCustomerParams = params
        this.customerDataSelectFn(params)
      } else {
        that.customerData = []
      }
    },
    selectChange(row) {
      this.$emit('selectChange', row)
    },
    clear() {
      this.c_id = ''
    }
  }
}
</script>

<style>

</style>

2、最重要的自定义指令实现v-loadmore

// select下拉刷新
Vue.directive('loadmore', {
  inserted(el, binding, vnode) {
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    if (SELECTWRAP_DOM) {
      SELECTWRAP_DOM.addEventListener('scroll', function() {
        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
        const type = binding.value.type
        // const fn = binding.value.fn
        if (condition) {
          binding.value.fn(type)
        }
      })
    }
  }
})

3、template 

   <SelectOptionCustomer :width="'100%'" :father-option="fatherOption" :cid="ruleForm.cid" @selectChange="customerSelectChange" />

 4.data

  fatherOption: {},
  ruleForm: {
      cid: null
   },

5.methods

    // 选择企业
    customerSelectChange(row) {
      this.ruleForm.cid = row
    },