element-ui 模糊查询功能

          <el-autocomplete
            value-key="name"                       //数据中对象关键名
            :clearable="true"                     //是否可清楚  默认为false
            class="inline-input"
            v-model="studentName"                //input输入值
            :fetch-suggestions="querySearch"    //返回建议
            placeholder="搜索学生名字"          //文本提示
            @select="handleSelect"             // 下拉点击获取的对象
          ></el-autocomplete>

通过接口获取到我们所需的数据,这里我们写了一组假数据

getStudentsByClassId({id:this.id}).then((res) => {
            //假如这是我们请求过来的数据
            this.shcoolClass=res.data.data=[
                       {name:'张三',id:1,sex:'男',age:17},
                       {name:'李四',id:2,sex:'男',age:30},
                       {name:'王五',id:3,sex:'女',age:10},
                       {name:'老六',id:4,sex:'男',age:11},
                       {name:'申七',id:5,sex:'男',age:25},
                       {name:'张八',id:6,sex:'女',age:30},
                       {name:'鬼九',id:7,sex:'男',age:25},
                       {name:'佳十',id:8,sex:'男',age:67}
                ]；

        }

返回建议列表数据 

    querySearch(queryString, cb) {
      let stuList = this.shcoolClass
      let results = queryString
        ? stuList.filter(this.createStateFilter(queryString))
        : stuList
      this.queryStudList = deepClone(results)//deepClOne 是写的拷贝方法，
      cb(results)
    },

当搜索到数据显示的内容 selected为选中对象利用filter去过滤

    handleSelect(selected) {
      this.queryStudList = this.queryStudList.filter(
        (item) => item.name === selected.name
      )
    },

这个是全字匹配，直接官网拿来就好

    createStateFilter(queryString) {
      return (item) => {
            //item字段是全部所匹配到的大小写汉子
        return (
          (item.name || '').toLowerCase().indexOf(queryString.toLowerCase()) >
          -1
        )
      }
    }