elment ui 实现模糊查询

实现功能效果图片

 

代码实现： 更改接口字段名可直接使用 

<el-col>

    <el-form-item label="转交人" prop="userName">

      <el-autocomplete

        v-model="forms.userName"

         :fetch-suggestions="querySearchAsync"

         @select="handleSelect"

         placeholder="请输入姓名或电话号码"

        >

      </el-autocomplete>

   </el-form-item>

 </el-col>

// queryString 为在框中输入的值
    // callback 回调函数,将处理好的数据推回
    querySearchAsync(queryString, callback) {
      let params = {
        name: queryString,
      };
      listUserByName(params)
        .then((response) => {
          // console.log(response);
          var list = [{}];
          for (let i of response.data) {
            i.value = i.userName; //将想要展示的数据作为value
          }
          list = response.data;
          callback(list);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleSelect(item) {
      this.forms.toId = item.userId;
    },