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.mzph.cn/diannao/11998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

越来越真的Deepfake再次引起网安界的关注

当地时间5月6日&#xff0c;全球网络安全领域最受关注的年度盛会 RSAC 2024在美国旧金山隆重开幕。当天&#xff0c;被誉为“安全圈奥斯卡”的创新沙盒大赛也决出了冠军&#xff0c;Reality Defender凭借其创新性的深度伪造&#xff08;Deepfake&#xff09;检测平台摘得桂冠&a…

【漏洞复现】泛微OA E-Cology users.data信息泄露漏洞

漏洞描述&#xff1a; 泛微OA E-Cology是一款面向中大型组织的数字化办公产品&#xff0c;它基于全新的设计理念和管理思想&#xff0c;旨在为中大型组织创建一个全新的高效协同办公环境。泛微OA E-Cology users.data存在敏感信息泄露漏洞&#xff0c;攻击者利用此漏洞可以获取…

Excel 根据包含的关键词将指定列按关键词指定顺序排列

例题描述和简单分析 有 Excel 文件&#xff0c;数据如下所示&#xff1a; AB1Parent ColumnModifier (Column)2Jack lives in the villageRose3As mentioned by jackVillage4Rose already spoke to jack about last nightJack5Rose left the village6rose was their yesterda…

DigitalOcean 应用托管更新:应用端到端运行时性能大幅改进

DigitalOcean 希望可以为企业提供所需的工具和基础设施&#xff0c;以帮助企业客户加速云端的开发&#xff0c;实现业务的指数级增长。为此 DigitalOcean 在 2020 年就推出了App Platform。 App Platform&#xff08;应用托管&#xff09; 是一个完全托管的 PaaS 解决方案&…

ubuntu下使用docker安装kafka

1.先安装zookeeper docker run -d --restartalways -e ALLOW_ANONYMOUS_LOGINyes --log-driver json-file --log-opt max-size100m --log-opt max-file2 --name zookeeper -p 2181:2181 -v /etc/localtime:/etc/localtime bitnami/zookeeper:latest 2.安装kafka docker run…

Docker 的 Ubuntu 操作系统镜像

Debian 和 Ubuntu 都是目前较为流行的 Debian 系列 的服务器操作系统&#xff0c;十分适合研发场景。 Debian 和 Ubuntu 属于同一系列的发行版。Debian 是由 Ian Murdock 在 1993 年创建的最初的发行版。Ubuntu 是 Mark Shuttleworth 在 2004 年基于 Debian 创建的发行版。 Li…

2024 National Invitational of CCPC (Zhengzhou)(CCPC郑州邀请赛暨CCPC河南省赛)

2024 National Invitational of CCPC (Zhengzhou) 2024CCPC郑州邀请赛暨CCPC河南省赛 2024 National Invitational of CCPC (Zhengzhou) B. 扫雷 1 题意&#xff1a;扫n轮雷&#xff0c;每轮开始获得一枚扫雷币&#xff0c;可保存&#xff0c;从第一轮开始&#xff0c;可以…

STM32 CANFD 基础知识留档

讲得比较细的文章但可能有问题自行判定 附1 附2 前言 CAN2.0 协议中数据段波特率和仲裁段波特率默认是一致&#xff0c;因此只需要关注传输波特率即可 CANFD 协议是向下兼容 CAN2.0 的数据通讯&#xff0c;因此实际使用中需要配置 STM32H7 系列支持的标准是 Compliant with …

大语言模型中上下文长度扩展技术的内容、原因和方式-综述

24年1月阿联酋科技创新研究院、孟加拉国伊斯兰科技大学、斯坦福大学、亚马逊公司和南卡大学AI研究院的论文“The What, Why, and How of Context Length Extension Techniques in Large Language Models – A Detailed Survey“。 LLM通常面临上下文长度外推方面的限制。 理解…

C++11 线程池:轻量级高并发解决方案

C11 线程池&#xff1a;轻量级高并发解决方案 线程池&#xff08;Thread Pool&#xff09;是一种线程管理的机制&#xff0c;它包含了多个预先创建的线程&#xff0c;用于执行多个任务&#xff0c;这些任务被放入任务队列中等待执行。 满足我们的生产者和消费者模型。 线程…

一文带你快速了解GPT-4o!内含免费使用指南!

一、GPT-4o简介 北京时间5月14日&#xff0c;OpenAI举行春季发布会。OpenAI在活动中发布了新旗舰模型“GPT-4o”&#xff01;据OpenAI首席技术官穆里穆拉蒂&#xff08;Muri Murati&#xff09;介绍&#xff0c;GPT-4o在继承GPT-4强大智能的同时&#xff0c;进一步提升了文本、…

电力场景设备漏油检测数据集VOC+YOLO格式338张1类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;338 标注数量(xml文件个数)&#xff1a;338 标注数量(txt文件个数)&#xff1a;338 标注类别…

Qt---项目的创建及运行

一、创建第一个Qt程序 1. 点击创建项目后&#xff0c;选择项目路径以及给项目起名称 名称&#xff1a;不能有中文、不能有空格 路径&#xff1a;不能有中文路径 2. 默认创建有窗口类myWidget&#xff0c;基类有三种选择&#xff1a;QWidget、QMainWindow、QDialog 3. m…

#自学习# 记一次py脚本打开浏览器页面

在项目总结中&#xff0c;遇到系统后台利用浏览器拉起一个已知路径页面的需求&#xff0c;趁着机会整理下。实现起来比较简单&#xff0c;浏览器默认谷歌。 一、技术原理 Selenium&#xff1a;Selenium 是一个用于自动化 Web 浏览器的工具&#xff0c;可模拟用户在浏览器中的各…

成都百洲文化传媒有限公司怎么样?靠谱吗?

在数字化浪潮席卷全球的今天&#xff0c;电商行业正以前所未有的速度蓬勃发展。作为这一变革的积极参与者和推动者&#xff0c;成都百洲文化传媒有限公司以其专业的电商服务&#xff0c;正逐渐成为行业内的佼佼者。 一、公司简介 成都百洲文化传媒有限公司自成立以来&#xff…

MyBatis的创建和测试

创建项目点击Spring Initializr然后点击next 点击SQL 选择里面的Mybatis Framework和Mysql Driver 按如下图片创建项目 user表中的数据 #下面这些内容是为了让MyBatis映射 #指定Mybatis的Mapper文件 mybatis.mapper-locationsclasspath:mappers/*xml #指定Mybatis的实体目录 my…

【Java】IDEA自动生成类图和时序图

【Java】IDEA自动生成类图和时序图 idea 的强大之处在于此&#xff0c;它包含了很多小插件&#xff0c;我们不需要再次下载相关插件&#xff0c;只需要在idea中小小的设置一下就可以了,下面是设置方法&#xff0c;我用的是idea2020版本 打开设置File -> Settings->Diagr…

Netty-面试题(中)(五十)

关于零拷贝和堆外内存 Java在将数据发送出去的时候&#xff0c;会先将数据从堆内存拷贝到堆外内存&#xff0c;然后才会将堆外内存再拷贝到内核态&#xff0c;进行消息的收发&#xff0c;代码如下: 所以&#xff0c;我们发现&#xff0c;假如我们在收发报文的时候使用直接内存&…

【Linux】进程信号(2万字)

目录 前言 一、生活角度的信号 1.1、我们来见一见信号&#xff1a; 1.2、模拟一下 kill 指令 二、信号的处理 三、产生信号的5种方法 3.1、kill命令 3.2、键盘可以产生信号 3.3、3种系统调用 3.4、软件条件 3.5、异常 四、比较 core 和 Term 五、键盘信号产生 六…

SSL/TLS协议信息泄露漏洞(CVE-2016-2183)解法

1.运行gpedit.msc&#xff0c;进入本地组策略编辑器。 2. 本地组策略编辑器-->计算机配置-->管理模板-->网络-->SSL配置设置-->启用“SSL密码套件顺序”。 3. 将原有的密码套件值清空&#xff0c;拷入下面的值&#xff0c;保存设置&#xff0c;并重启服务器即…