vue select下拉选择可搜索

---

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

 

          
             
                
                   {{item.title}}
                
             
          

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
      })
    },
}