Element / Select下拉框 / 动态加载数据 + 远程搜索

动态加载数据：

ElementUI没有给Select提供动态加载数据的api，需要自己写一个自定义指令：

// directives/lodemore.js
export default {
  bind(el, binding) {
    // 获取element-ui定义好的scroll盒子
    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()
      }
    })
  }
}

远程搜索：

按照官方文档配置以下属性：

参数	说明	值
filterable	是否可搜索	true
remote	是否为远程搜索	true
remote-method	远程搜索方法	function

代码示例：

<el-form-item label="所在小区">
  <el-select
    v-model="searchInfo.plot"
    @change="plotChange"
    clearable
    @clear="plotClear"
    v-loadMore="loadPlots"
    filterable
    :remote="isPlotsRemote"
    :remote-method="searchPlots"
    @focus="plotFocus"
  >
    <el-option
      v-for="item in plotList"
      :key="item.plotId"
      :label="item.plotName"
      :value="item.plotId"
    ></el-option>
  </el-select>
</el-form-item>

<script>
 /**
  * 动态加载小区
  */
 private async loadPlots() {
   if (this.isPlotsRemote) {
     const res = await this.getFlatPlotLists({
       index: ++this.plotsIndex,
       size: this.plotsSize,
     })
     if (!!res) {
       this.plotList = this.plotList.concat(res.list)
     }
   }
 }

  /**
   * 远程搜索小区
   */
  private async searchPlots(query: any) {
    const res = await this.getFlatPlotLists({
      searchText: query,
    })
    if (!!res) {
      this.plotList = res.list
    }
  }

  /**
   * 初始化小区
   */
  private plotFocus() {
    if (this.isPlotsRemote) {
      this.plotsIndex = 0
      this.plotList = []
      this.loadPlots()
    }
  }
</script>

遇到的问题：

问题：
在文本框里输入查询条件后一个都不选，直接让下拉框失焦，然后再次点击下拉框进行选择，显示的备选列表是之前查询后的，没有刷新

---

解决方法：
在下拉框获得焦点时重置选项

问题：
如果select配置了clearable属性， 点击清空按钮后，再次点击下拉框进行选择，显示的备选列表是之前查询后的，没有刷新

---

解决方法：
在下拉框获得焦点时重置选项或者在clear回调事件中重置选项

参考链接：

https://www.cnblogs.com/lianjy/p/10726662.html