vue+ elementUI使用el-autocomplete从远程实时查询

最新推荐文章于 2025-06-18 15:16:07 发布

原创

最新推荐文章于 2025-06-18 15:16:07 发布 · 4.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#el-autocomplete #实时查询

本文介绍了如何在Vue项目中利用ElementUI的el-autocomplete组件，实现从数据库进行实时模糊查询。当在'预制模板'输入框中输入模板名时，系统会自动从后台获取匹配数据，并在下拉列表中展示。用户选择列表中的某一项后，相关数值将自动填充到'合并方式'等其他字段。

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

页面需求如下：第一步，在“预制模板”中输入模板名，需要从数据库模糊查询出数据集，第二步，选中某条数据后，将对应的其他数值填入“合并方式”等其他项目中。

<template>
  <el-dialog :title="'箱单发票创建设置'" append-to-body="true"
    :close-on-click-modal="false" :visible.sync="visible">
    <el-form :model="dataForm" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <el-form-item label="预置模板" prop="ruleName">
        <el-autocomplete class="inline-input" v-model="dataForm.ruleName"
          :fetch-suggestions="queryByRuleName" placeholder="预置模板"
          @select="handleSelect" size="mini"
        ></el-autocomplete>
      </el-form-item>
     .................
     ...省略其他组件...
     .................
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {