当前位置: 首页 > news >正文

a-auto-complete 请求后端数据做模糊查询,解决下拉框选择选不上,不回显的问题

a-auto-complete 请求后端数据做模糊查询,解决下拉框选择选不上,不回显的问题

在这里插入图片描述

记录一个a-auto-complete卡bug卡了两天,找不到哪里的问题下拉框选择选不上,不回显,最后终于解决了。
我还对下拉框显示的内容做了小调整。
直接看代码吧。

<a-auto-complete v-model:value="inputValue" :options="personOptions" style="width: 300px" placeholder="请输入姓名"@select="onSelect" @search="onSearch"><template #option="item"><span>{{ item.name }}</span><br /><span style="color:#1890ff">{{ item.licenseNumber }}</span></template></a-auto-complete>..................
//input值
const inputValue = ref('');
//下拉框option
const personOptions = ref([]);
//输入的事件
const onSearch = searchText => {
//发送请求获取option数组const param = {name: searchText}relationApi.getPerson(param).then((res) => {///卡bug的地方就在这,请求接口返回的数据了没有value这个字段,所以要给option数组里的对象添加value属性///option数组里需要name和value属性!const a = res.map(item => {return {...item,value: item.name}})personOptions.value = !searchText? []: a;}).finally(() => {})
};
//选择下拉框的事件
const onSelect = (value, option) => {
/value是下拉框选中的值,option是选中的所有属性,可以取你自己想要的值,我这里取的是option.licenseNumbe,然后自己进行后续操作。relationApi.getPersonDetial({ licenseNumber: option.licenseNumber }).then((res) => {if (res.body) {treeData.value = res.body} else {message.warning('暂无数据!')treeData.value = []}initTree();}).finally(() => {})
};
http://www.lryc.cn/news/345236.html

相关文章:

  • Leetcode—724. 寻找数组的中心下标【简单】
  • C语言 | Leetcode C语言题解之第72题编辑距离
  • AI视频教程下载:零代码创建AI智能体、AI Agents和ChatGPT的Gpts
  • 汽车之家,如何在“以旧换新”浪潮中大展拳脚?
  • 图神经网络(GNNs)在时间序列分析中的应用
  • Qt QShortcut快捷键类详解
  • 003 redis分布式锁 jedis分布式锁 Redisson分布式锁 分段锁
  • Jackson工具,java对象和json字符串之间的互相转换
  • 【设计模式】之装饰器模式
  • leetcode_46.全排列
  • 【牛客】[HNOI2003]激光炸弹
  • Docker与Harbor:构建企业级私有Docker镜像仓库
  • 推荐几个傻瓜式短视频去水印在线网站
  • 大模型LLM之SFT微调总结
  • 【RocketMQ问题总结-2】
  • 掌握Android Fragment开发之魂:Fragment的深度解析(上)
  • 深度解读DreamFusion:一站式AI解决方案
  • JVM-02
  • 【一起深度学习——NIN】
  • 数字工厂管理系统如何助力企业数据采集与分析
  • uniap之微信公众号支付
  • Django知识点总结
  • 算法(C++
  • Python专题:六、循环语句(1)
  • 力扣2105---给植物浇水II(Java、模拟、双指针)
  • Windows设置Redis为开机自启动
  • 行业早报5.10
  • Java+SpringBoot+JSP实现在线心理评测与咨询系统
  • 机器学习算法应用——K近邻分类器(KNN)
  • python数据分析——数据的选择和运算