ElementUI带输入建议的输入框组件中建议重复出现问题

在使用ElementUI的带输入建议的输入框组件时,遇到后台返回数据可能存在重复的问题。为解决此问题,采取策略是先获取后台数据,然后创建空数组,通过遍历并判断数组中是否存在某条数据来避免重复,只有当数据未存在于数组中时才将其添加到数组中。

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

需求:使用ElementUI的输入框实现带提示建议搜索相关数据,其中提示建议中的数据从后端返回,存在重复的数据需要进行处理。

问题:直接调用后台数据渲染会出现数据重复的现象(上图修改前,下图修改后)

修改前
修改前
修改后

官方带提示建议的input组件获取的数据是直接写出来的,但是本项目提示建议的数据是从后台调用逐条添加渲染的,容易出现重复的数据,因此思路是先获取后台调用的数据,并创建一个空数组,遍历调用的数据,判断数组中是否有该数据,若无,则push进数组中,若有该数据不进行添加。

<el-autocomplete
  class="input"
  v-model="param.curingBarnCode"
  :fetch-suggestions="querySearchBarn"
  @keyup.enter.native="queryBatchList"
  placeholder="请输入烤房编号"
  style="width: 250px"
  @clear="clearBarnCode"
  clear
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值