element ui input模糊搜索

1.template中

<el-autocomplete
   class="inline-input"
   v-model="formInline.rotaPlanName"
   :fetch-suggestions="querySearch"
   placeholder="請輸入設備名稱"
   :trigger-on-focus="false"
   @select="handleSelect"
 ></el-autocomplete>

2.methods中

   要將獲取到得json格式處理成模糊搜索支持的格式

data = data.map((item) => {
          return {
            name: item.equipId,
            value: item.equipName,
          };
        });
this.equipInstArr = data;

綁定組件的兩個方法

querySearch(queryString, cb) {
      var equipInstArr = this.equipInstArr;
      // console.log("equipInstArr", equipInstArr);

      var results = queryString
        ? equipInstArr.filter(this.createFilter(queryString))
        : equipInstArr;
      console.log(results);
      // 調用 callback 返回建議列表的數據
      cb(results);
    },

createFilter(queryString) {
      return (equipInstArr) => {
        return (
          equipInstArr.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },

這樣就ok