vue内根据历史数据进行输入框联动数据自动补全

长安|故里

已于 2023-07-01 16:16:02 修改

阅读量916

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js elementui javascript

于 2023-07-01 16:03:38 首次发布

本文链接：https://blog.youkuaiyun.com/Szs1208/article/details/131488816

在Vue项目中，针对输入框自动补全功能的需求，本文介绍了如何利用vue.js和elementui库实现历史数据的显示以及点击历史数据时，其他输入框自动填充对应内容的详细步骤。通过在事件处理中动态更新建议数据，并结合组件属性实现联动效果。

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

存在问题：vue新增中想实现点击第一个输入框会出现历史数据，且点击这些历史数据中的某个数据时，下方输入框会自动填补对应内容。

实现步骤：①实现点击输入框既能出现历史数据也能进行手动录入（这时需要在列表方法中的循环里面定义一个对象用来接收参数（这个参数可以多个，可以是id、名称也可以是其他字段），然后在将这个对象push到:fetch-suggestions='queryString'中的queryString方法内定义的一个数组中）

看代码

<el-form label="实验名称" prop='testName'>
    <el-autocomplete
        v-model="form.testName"
        :fetch-suggestions="querySearcch"
        placeholder="请选择实验名称"
        @select="handleSelect"
        clearable
    >
    </el-autocomplete>
 </el-form-item>

getList() {
    this.loading = true;
    listTest(this.queryParams).then(res => {
        this.testList = res.rows;
        this.total = res.total;
        this.loading = false;

        this.testList.forEach(e => {
            var obj = {
                id: e.testId,
                value: e.testName
            };
            this.restaurants.push(obj);
          });
        });
       },