欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue+elementUI input框之过滤显示

程序员文章站 2022-06-07 15:32:35
...

 效果图如下:

vue+elementUI input框之过滤显示


<el-form-item label="Test Filter: ">
  <el-autocomplete
      class="inline-input"
      v-model="form.filter"
      :fetch-suggestions="querySearch"
      placeholder="请输入内容"
      @select="handleSelect"
  ></el-autocomplete>
</el-form-item>
methods:{
  querySearch(queryString,cb){
    let arr = [
      {name:'a',value:'he is a gril'},
      {name:'b',value:'good name'},
      {name:'c',value:'how boy'},
    ];
    let results = queryString ? arr.filter((currentValue,index,arr) => {
      console.log(currentValue);//item的每一项
      console.log(arr);//arr数组
      return (currentValue.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);//满足条件的返回
    },this):arr;
    cb(results)
  },
}