【el-autocomplete使用】

最新推荐文章于 2025-06-05 16:04:39 发布

原创最新推荐文章于 2025-06-05 16:04:39 发布 · 337 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

这个博客展示了如何利用Vue的El-Autocomplete组件进行实时搜索。通过`querySearchAsync`方法从API获取建议数据，并在用户选择时更新详细信息。博客中提到了`handleSelect`函数用于处理选中项，将选中员工的ID存储在`detailData.resultRemark`中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

          <el-autocomplete
            v-model="userQuery.realName"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入员工姓名"
            @select="handleSelect"
            clearable
            style="width: 200px;margin-right: 9px"
            :trigger-on-focus="false"
          ></el-autocomplete>

querySearchAsync(queryString, cb) {
      if( queryString != null || queryString != '' || queryString != undefined ) {
        employeeAPI.getTzUserName(queryString)
        .then(response => {
          let KnowledgeList = []
          response.data.forEach(item => {
            KnowledgeList.push({"value": item.realName, "content": item.userId})
          })
          cb(KnowledgeList);
        });
      }
    },
    handleSelect(item) {
      if( item !== null || item !=='' || item !==undefined ) {
        this.detailData.resultRemark = item.content
      }
    },