一个指令解决element-ui中el-select无限滚动的所有问题（节流、远程搜索、回显）

直接上代码：

首先是全局指令： 

/**
 * el-select加载事件（可用于做select的无限滚动）
 * 使用方法（两种方法，推荐第2种）：
 * 1. 查询方法自定义（远程搜索也需要自定义）：
 *    v-load-more.method="function(){}"
 * 2. 传入url就可实现无限滚动和远程搜索，要求接口分页参数为“pageSize”和“pageNo”：
 *    v-load-more="{url:'operationSupport_qualification/ColBase/findAllByPage', options: relColIdOptions}"
 *    url:（必传）后端接口地址
 *    options:（必传）el-option中用来v-for的对象数组
 *    modelField: （必传）用于回显时查询用的字段以及返回时对应key的字段
 *    pageSize:（非必传）每次加载的条数，不传则默认10
 *    model: （非必传）用于回显时查询用的字段值，填了这一项才能回显，这一项和el-select的v-model相等，要求后端接口支持
 *           回显还有另一种用法，就是给options设置初始值，初始值内容为需要回显的内容
 *    searchField:（非必传）远程搜索用的字段，不传则不能实现远程搜索；
 *                要求接口支持和el-select开启搜索（filterable，并重置自定义搜索方法（:filter-method="()=>{}"））
 *    searchData:（非必传）远程搜索固定内容
 */
Vue.directive('loadMore', {
  bind(el, binding) {
    // 如果有method由调用方实现，没有则在这里实现加载和远程搜索的功能
    if (binding.modifiers.method) {
      // 节流
      let timer
      // 滚动监听
      el.querySelector('.el-select-dropdown .el-select-dropdown__wrap').addEventListener('scroll', function() {
        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 100
        if (!timer && condition) {
          // 滚动加载（调用自定义的加载方法）
          binding.value()
          timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
          }, 500)
        }
      })
    } else {
      // 传入的对象
      let value = binding.value
      // 节流
      let timer
      // 无搜索内容变量
      let pageNo = 1
      let pages = 1
      // 远程搜索内容变量
      let searchPageNo = 1
      let searchPages = 1
      // 每次加载的条数
      let pageSize = isNaN(value.pageSize) ? 10 : parseInt(value.pageSize)
      // 远程搜索变量
      let searchField = value.searchField
      // 搜索固定内容
      let searchData = value.searchData
      // 接口地址
      let url = value.url
      // 下拉数组，这个options在本方法中必须永远指向value.options，否则整个功能都将失效
      let options = value.options
      // 无搜索拷贝数组，此处是为了在加载的基础上加一些默认的下拉项
      let optionsCopy = JSON.parse(JSON.stringify(value.options))
      // 远程搜索拷贝数组
      let optionsSearch = []
      // 远程搜索内容
      let searchValue = ''
      // 加载逻辑
      const loadOptions = (searchField, search, searchData) => {
        let params = {
          pageSize: pageSize
        }
        if (searchData) {
          Object.assign(params, searchData)
        }
        // 这里不能改变options的指向，否则会使整个功能失效（不能用options = []）
        options.length = 0
        // 判断是否为远程搜索，true-是
        if (searchField && search) {
          // 当到最大页数时不再查询
          if (searchPages >= searchPageNo) {
            params.pageNo = searchPageNo++
            params[searchField] = search
            api[url](params).then(res => {
              if (res) {
                searchPages = Math.ceil(res.data.total / pageSize)
                optionsSearch = optionsSearch.concat(res.data.data)
                dataProcessing(optionsSearch)
              }
            })
          }
        } else {
          // 当到最大页数时不再查询
          if (pages >= pageNo) {
            params.pageNo = pageNo++
            api[url](params).then(res => {
              if (res) {
                pages = Math.ceil(res.data.total / pageSize)
                optionsCopy = optionsCopy.concat(res.data.data)
                dataProcessing(optionsCopy)
              }
            })
          }
        }
      }
      // 返回数据处理
      let dataProcessing = (optionsCopy) => {
        // 这里不能改变options的指向，否则会使整个功能失效
        optionsCopy.forEach(item => {
          let check = options.find(t => {
            return t[value.modelField] === item[value.modelField]
          })
          if (!check) {
            options.push(item)
          }
        })
      }
      // 首次加载
      loadOptions(undefined, undefined, searchData)
      // 判断是否需要回显
      if (value.model && value.modelField) {
        // 回显方法
        let echo = (model, modelField, searchData) => {
          let params = {}
          params[modelField] = model
          if (searchData) {
            Object.assign(params, searchData)
          }
          api[url](params).then(res => {
            if (res) {
              optionsCopy = optionsCopy.concat(res.data.data)
              dataProcessing(optionsCopy)
            }
          })
        }
        if (optionsCopy.length > 0) {
          let check = optionsCopy.find((item) => {
            return item[value.modelField] === value.model
          })
          if (!check) {
            echo(value.model, value.modelField, searchData)
          }
        } else {
          echo(value.model, value.modelField, searchData)
        }
      }
      // 滚动监听（无限滚动）
      el.querySelector('.el-select-dropdown .el-select-dropdown__wrap').addEventListener('scroll', function() {
        const condition = this.scrollHeight - this.scrollTop <= this.clientHeight + 100
        if (!timer && condition) {
          // 滚动加载
          loadOptions(searchField, searchValue, searchData)
          timer = setTimeout(() => {
            clearTimeout(timer)
            timer = null
          }, 200)
        }
      })
      // 输入监听（远程搜索）
      if (searchField) {
        const elInput = el.getElementsByTagName('input')[0]
        // 输入搜索
        elInput.addEventListener('input', function() {
          if (this.value) {
            searchPageNo = 1
            searchPages = 1
            optionsSearch = []
            searchValue = this.value
            loadOptions(searchField, searchValue, searchData)
          } else {
            searchValue = ''
            dataProcessing(optionsCopy)
          }
        })
        // 失去焦点时清除输入内容
        elInput.addEventListener('blur', function() {
          searchValue = ''
          dataProcessing(optionsCopy)
        })
      }
    }
  }
})

方法一（不推荐）：

(方法一只实现了无限滚动，如果需要其他的，可以参考方法二，这里不推荐是因为用到的代码还是会很多，方法都需要自己去定义) 

<el-select v-model="id"
           filterable
           placeholder="请选择关联人员"
           v-load-more.method="load"
           style="width: 100%">
  <el-option
    v-for="item in options"
    :key="item.id"
    :label="item.name"
    :value="item.id">
  </el-option>
</el-select>


data() {
  return {
    options:[],
    pages: 1,
    pageNo: 1,
    pageSize: 10,
    id: ''
  }
}


methods: {
  load() {
    if (this.pages >= this.pageNo) {
      // todo 这里的请求是我们项目自己封装的，需要换成你们自己的请求方法
      this.$api['url']({
        pageSize: this.pageSize,
        pageNo: this.pageNo++
      }).then(res => {
        if (res) {
          this.pages = Math.ceil(res.data.total / this.pageSize)
          this.options.push(...res.data.data)
        }
      })
    }
  }
}


mounted() {
	this.load()
} 

方法二（推荐）：

<el-select v-model="id"
           filterable
           :filter-method="()=>{}"
           v-load-more="{
             url:'url',
             options: options,
             model: id,
             modelField: 'id',
             searchField: 'name'}"
           style="width: 100%">
  <el-option
    v-for="item in options"
    :key="item.id"
    :label="item.name"
    :value="item.id">
  </el-option>
</el-select>

data() {
  return {
    options:[],
    id: ''
  }
} 

ps：如果有不会用、看不懂和可以改进的地方，都可以提出来，我会实时更新