ElementUI输入搜索框autocomplete的使用

看效果

HTML

<el-autocomplete
            class="inline-input"
            v-model="state1"
            :fetch-suggestions="((queryString,cb)=>{
   querySearch(queryString,cb,'collegeList')
  })"
            placeholder="全部学院"
            @select="handleSelect"
            @change='findApplyTeacher()'
          ></el-autocomplete>

JS

querySearch (queryString, cb, options) {
      let data = this[options] // 下拉框数据
      var results = queryString
        ? data.filter(this.createFilter(queryString))
        : data
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (field) => {
        return (
          field.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1
        )
      }
    },

注意 若下拉框数据不显示，查看数据是否有 value 字段，el-autocomplete显示的时候必须有value字段，可手动添加一个value属性,下拉框数组必须value做lable

 handleSelect (item) {
      if (item.insCode) {
        this.teacherData.deptCode = item.insCode // 绑定值传 name 属性对应值
      } else {
        this.teacherData.deptCode = -1
      }
    },

然后在@select="handleSelect"里面把绑定的值传给对应的值