vue select下拉选择可搜索

---

当下拉数据过多时我们需要想搜索那样的功能，

 

          <a-form-item label="一级服务类目名称">
             <a-select
                @focus="handleFocus"
                @change="selectParentOne"
                showSearch
                v-decorator="[
                  'levelOne',
                  { rules: [{ required: true, message: '一级服务类目名称不能为空' }] },
                ]"
                allowClear
                :filterOption="false"
                @search="handleSearch"
                placeholder="请选择一级服务类目"
              >
                <a-select-option
                   v-for="item in selectedItems"
                   :key="item.id+''"
                 >
                   {{item.title}}
                </a-select-option>
             </a-select>
          </a-form-item>

export default {
  data () {
    return {
      selectedItems: [],  // 数据存放在数组里
      conditions: {
        code: '',
        title: '',
        intro: '',
        level: 2,
        isPosition: 1
      }, // 新建
    }
  },
  methods: {
    /**
     * 搜索一级类目
     */
    handleSearch (value) {
      this.projectItemsData(value)
    },
    /**
     * 获取焦点时
     */
    handleFocus () {
      this.projectItemsData()
    },
    /**
     * 选择一级类目
     */
    selectParentOne (value, option) {
      this.conditions.parentId = value
      this.conditions.type = this.selectedItems.filter(item => item.id == value)[0].title
    },
    /**
     * 获取一级列表数据
     */
    projectItemsData (searWard) {
      const con = {}
      con.level = 1
        // 有分页时
      con.page = JSON.stringify({ size: 100, current: 1 })
        // 搜索时的关键字
      if (searWard) con.type = searWard
        // 获取接口数据存放在数组里
      projectItems(con).then(res => {
        this.selectedItems = res.result.datas.records
      })
    },
}