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

原文地址:https://www.cnblogs.com/lq2333/p/15189675.html