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

在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);
          });
        });
       },

                
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值