目录

一、自带选择搜索框

二、具体实现

总结

前言

        应交互需求，需要如下的选择搜索框，也是最后的效果图：

一、自带选择搜索框

         为完成需求能委屈自己去重新写一个了

二、具体实现

代码如下（示例）：

<div @click="e => { e.preventDefault(); this.selectOpen = !this.selectOpen; }" class="select">
              主机组：
                <a-select
                v-decorator="[
                  'selectHostGroup',
                  {
                    rules: [{ required: true, message: '请选择主机组' }],
                    getValueFromEvent:(e)=> this.onSelectedChange(e)
                  }
                ]"
                :open="selectOpen"
                @select="selectOpen = false"
                @blur="blurEvent"
              >
                <a-spin slot="notFoundContent" size="small" />
                <div slot="dropdownRender" slot-scope="menu">
                  <div
                    style="padding: 0px 7px; cursor: pointer;"
                  >
                    <a-input-search
                    id="inputSearch"
                    placeholder="请输入主机组名称"
                    style="width: 100%;
                    margin-top:5px;"
                    v-model="SearchValue"
                    @blur="blurEvent"
                    @change="SearchFilterOption(SearchValue)" />
                  </div>
                   <v-nodes :vnodes="menu" />
                </div>
                <a-select-option v-for="item in selectedItems" :key="item" :value="item">
                    {{ item }}
                </a-select-option>
              </a-select>
</div>

    SearchFilterOption(SearchValue) {
      if (SearchValue) {
          this.selectedItems = this.selectedItems2.filter(filterByName(SearchValue))//筛选方法自己写
      } else {
          this.selectedItems = this.selectedItems2
      }
    },
   blurEvent() {
    // 获取当前焦点 id
      if (document.activeElement.id !== 'inputSearch') {
          this.selectOpen = false
      }
    },

注意查看官网的，使用 dropdownRender 对下拉菜单进行自由扩展。 另外注意点击搜索输入框后的焦点问题。

总结

        后来因为代码冗余，被让改回直接使用原自带选择搜索了。。。