可远程搜索的a-select组件

功能齐全的a-select下拉组件，可多选，可远程搜索

多选，可远程搜索，下拉框组件

<a-form-item label="合同编号" v-bind="formItemLayout">
          <a-select
            allowClear
            showSearch
            mode="multiple"
            optionFilterProp="children"
            :filter-option="false"
            :not-found-content="null"
            @search="handleSearchCode"
            @change="handleChangeCode"
            v-decorator="[
              'tcontractCode',
              {
                rules: [{ required: true, message: '请选择合同编号，支持模糊匹配' }]
              }
            ]"
            placeholder="请选择合同编号，支持模糊匹配"
          >
            <a-select-option v-for="item in tcontractCodeList" :value="item.label" :key="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-item>

远程搜索首先需要设置showSearch,不使用本地数据搜索:filter-option="false",无数据时什么都不显示:not-found-content="null",设置多选模式mode="multiple",搜索函数handleSearchCode

// 远程查询函数
loadDeclarationPull (_name) {
  const _this = this
  return new Promise(resolve => {
    getDeclarationPull({ name: _name }).then(res => {
      _this.tcontractCodeList = res || []
      resolve()
    })
  })
},
// 搜索函数
handleSearchCode (value) {
  this.loadDeclarationPull(value)
},

清空数据时候allowClear调用handleChangeCode函数，清空下拉框数据重新加载全部下拉数据

handleChangeCode (value) {
  // 判断一下value不存在就加载全部数据
  if (!value || value.length < 1) {
    this.loadDeclarationPull()
  }
},

以上总结是写给别人更是写给自己，如有不对的地方或者更好的方法，欢迎留言交流，在探索的路上与君共勉！