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,一经查实,立即删除!

相关文章

MYSQL数据库默认的系统库详解

文章目录 [TOC](文章目录) MYSQL数据库默认的系统库详解1、information_schema(数据库)2、mysql3、performance_schema &#xff08;性能库&#xff09;4、sys MYSQL数据库默认的系统库详解 1、information_schema(数据库) 1、记录了用户、表、视图等元数据信息。这个库是虚拟…

越来越真的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;可以…

27.C++的类型转换(介绍了static_cast、reinterpret_cast、const_cast、dynamic_cast的用法)

1. C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&#xff0c;或者形参与实参类型不匹配&#xff0c;或者返回值类型与接收返回值类型不一致时&#xff0c;就需要发生类型转化&#xff0c;C语言中总共有两种形式的类型转换&#xff1a;隐式类型转换…

JavaScript中的call、apply和bind方法(2)

JavaScript中的call、apply和bind方法是用于改变函数执行上下文和预先设置参数的强大工具。它们在编写可维护和优雅的代码时起到了重要的作用。本文将介绍这些方法的原理和使用场景&#xff0c;并展示如何将它们应用于你的代码中&#xff0c;使其更加漂亮。 call方法的原理和使…

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;进一步提升了文本、…

常用限流方式

1. 令牌桶算法&#xff08;Token Bucket&#xff09; 令牌桶算法是一种常用的限流算法&#xff0c;它通过维护一个固定容量的令牌桶&#xff0c;以限制单位时间内通过的请求数量。当请求到达时&#xff0c;会从令牌桶中获取一个令牌&#xff0c;如果令牌桶中没有令牌&#xff…

如何使用Python进行网页爬取

Python爬虫案例可以有很多种&#xff0c;但我会为你提供一个简单的案例&#xff0c;该案例使用Python的requests库来爬取一个网页的内容&#xff0c;并使用BeautifulSoup库来解析HTML并提取特定的信息。 假设我们要从某个新闻网站&#xff08;例如&#xff1a;示例网站&#x…

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

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

第N1周:one-hot编码

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 1.什么是one-hot编码 One-Hot编码是一种常用于机器学习中的特征编码方式&#xff0c…

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

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

Redis为什么快

用了那么久的redis&#xff0c;突然意识到这个问题答不上来&#xff0c;只知道内存数据库&#xff0c;内存的读写性能快于磁盘。 1. 内存存储 Redis 是一个基于内存的数据库&#xff0c;它将所有的数据都保存在内存中&#xff0c;这使得读取的速度非常快。内存读写速度远超于…