element ui input组件 模糊查询

 el-autocomplete带输入建议———Element - The world's most popular Vue UI framework

 <el-autocomplete  class="screen-int"  v-model="maintainName"  :fetch-suggestions="querySearch"  :trigger-on-focus="false"   @select="handleSelect" ></el-autocomplete>

 

 

   // 模糊查询

    querySearch(queryString, cb) {

      var maintainHis = this.maintainHis;

      var results = queryString

        ? maintainHis.filter(this.createStateFilter(queryString))

        : maintainHis;

      cb(results);

    },

    createStateFilter(queryString) {

      return (maintainName) => {

        return (

          maintainName.value.toLowerCase().indexOf(queryString.toLowerCase()) >

          -1

        );

      };

    },

    handleSelect(item) {

      console.log(item);

    },

注意，组件默认匹配value值内容，若后端返回字段名称不同，需转化为value。

 例：将后端 reportRecordName 字段名转化为 value

 this.maintainHis = JSON.parse(

            JSON.stringify(this.maintainHis).replace(

              /"reportRecordName"/g,

              '"value"'

            )

          );