vue antd-vue a-selece 即可以下拉又可以搜索你还不会吗！

        一般我们在写管理系统的时候，涉及到大量的表单，有很多输入框或是下拉框，我们是不是的会碰到各种需求满足用户，比如，我们现在有一个下拉选项，稍微有点长，用户就嫌麻烦，要求下拉选项支持文本输入并模糊搜索，有些新手觉得这个很难，有时候看着antd官方文档都搞老半天！

        这是我们正常的下拉框

    <a-select default-value="lucy" style="width: 120px" @change="handleChange">
      <a-select-option value="jack">
        Jack
      </a-select-option>
    </a-select>

        

     其实你只需要加两个属性，就完全能做到这个效果，如下

              <a-select
                show-search    // 加这个就支持文本搜索 搜索的是本地的下拉选项
                v-model="queryParam.portalId"
                defaultValue="en_US"
                placeholder="请选择所属门户"
                optionFilterProp="label" // 这个是过滤属性，输入文本多本地选项进行过滤
                allow-clear
                style="width: 200px"
              >
                <a-select-option
                  v-for="item in portalList"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>

        如果搜索不存在的选项，失焦后输入框内容会被清空，所以我们用提供的事件方法blur，去保留输入框内容。

        输入内容时，触发search事件，获取的value值即为输入内容；在search事件内调用change事件，将value值赋给组件；在组件失焦时，将value输入框内容赋值给组件，防止被清空；增加选项可在在数据提交时做处理。

<!-- html  -->
<a-select
   placeholder="请选择"
   v-model="selectValue"
   :getPopupContainer="getPopupContainer()"
   :options='barcodeOptions'
   showSearch
   :filter-option="false"
   @blur="onBlur"
   @change="onChange"
   @search="onSearch"     
/>

没事 多看看官方文档，每个属性都亲自测一下，才会真正明白其意义~~~~

        赶紧行动起来吧~~