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(() => {})
};
相关文章:
a-auto-complete 请求后端数据做模糊查询,解决下拉框选择选不上,不回显的问题
a-auto-complete 请求后端数据做模糊查询,解决下拉框选择选不上,不回显的问题 记录一个a-auto-complete卡bug卡了两天,找不到哪里的问题下拉框选择选不上,不回显,最后终于解决了。 我还对下拉框显示的内容做了小调整。…...
Leetcode—724. 寻找数组的中心下标【简单】
2024每日刷题(129) Leetcode—724. 寻找数组的中心下标 实现代码 class Solution { public:int pivotIndex(vector<int>& nums) {int sum accumulate(nums.begin(), nums.end(), 0);int prefix 0;for(int i 0; i < nums.size(); i) {i…...
C语言 | Leetcode C语言题解之第72题编辑距离
题目: 题解: static inline int Min(const int a, const int b, const int c) {int min (a < b) ? a : b;return (min < c) ? min : c; }int minDistance(char * word1, char * word2){int m strlen(word1), n strlen(word2);int dp[m 1][n…...
AI视频教程下载:零代码创建AI智能体、AI Agents和ChatGPT的Gpts
这门课程专注于提示工程的掌握,教你以精确的方式引导GPT,利用它们的生成能力产生卓越的AI驱动结果。一步一步地,你将学会创建多样化的GPT军团——每个都设计来满足特定的专业需求。 从提供个性化职业变更指导的职业教练AI,到以惊…...
汽车之家,如何在“以旧换新”浪潮中大展拳脚?
北京车展刚刚落幕,两重利好正主导汽车市场持续升温:新能源渗透率首破50%,以及以旧换新详细政策进入落地期。 图源:中国政府网 在政策的有力指引下,汽车产业链的各个环节正经历着一场深刻的“连锁反应”。在以旧换新的…...
图神经网络(GNNs)在时间序列分析中的应用
时间序列数据是记录动态系统测量的主要数据类型,由物理传感器和在线过程(虚拟传感器)大量生成。时间序列分析对于解锁可用数据中隐含的丰富信息至关重要。随着图神经网络(GNNs)的最近进展,基于GNN的方法在时…...
Qt QShortcut快捷键类详解
1.简介 QShortcut是一个方便的工具类,用于在应用程序中创建快捷键。通过设置快捷键和关联的处理函数,可以实现快速执行某个操作的功能。 // 创建一个快捷键,关联到MyWidget类的keyPressEvent()函数 QShortcut *shortcut new QShortcut(QKe…...
003 redis分布式锁 jedis分布式锁 Redisson分布式锁 分段锁
文章目录 Redis分布式锁原理1.使用set的命令时,同时设置过期时间2.使用lua脚本,将加锁的命令放在lua脚本中原子性的执行 Jedis分布式锁实现pom.xmlRedisCommandLock.javaRedisCommandLockTest.java 锁过期问题1乐观锁方式,增加版本号(增加版本…...
Jackson工具,java对象和json字符串之间的互相转换
一、maven依赖引入jackson <dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.12.5</version></dependency>jackson-databind依赖见下: <depend…...
【设计模式】之装饰器模式
系列文章目录 【设计模式】之模板方法模式 【设计模式】之责任链模式 【设计模式】之策略模式 【设计模式】之工厂模式(三种) 前言 今天给大家介绍23种设计模式中的装饰器模式。🌈 一、什么是装饰器模式 装饰器模式(Decora…...
leetcode_46.全排列
46. 全排列 题目描述:给定一个不含重复数字的数组 nums ,返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1: 输入:nums [1,2,3] 输出:[[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]]示例 2&#…...
【牛客】[HNOI2003]激光炸弹
原题链接:登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 二维前缀和板题。 注意从(1,1)开始存即可,所以每次输入x,y之后,要x,y。 因为m的范围最大为…...
Docker与Harbor:构建企业级私有Docker镜像仓库
目录 引言 一、本地私有仓库 (一)基本概述 (二)搭建本地私有仓库 1.下载registry镜像 2.启动容器 3.上传本地镜像 4.客户端下载镜像 二、Harbor简介 (一)什么是 Harbor (二ÿ…...
推荐几个傻瓜式短视频去水印在线网站
在数字化时代,短视频已成为信息传播的重要方式之一。随着TikTok、Instagram Reels、抖音等平台的流行,短视频的制作和分享成为了日常生活的一部分。然而,在分享或编辑这些短视频时,去除水印成为了一项不可或缺的需求。水印是视频原…...
大模型LLM之SFT微调总结
一. SFT微调是什么 在大模型的加持下现有的语义理解系统的效果有一个质的飞跃;相对于之前的有监督的Pre-Train模型;大模型在某些特定的任务中碾压式的超过传统nlp效果;由于常见的大模型参数量巨大;在实际工作中很难直接对大模型训…...
【RocketMQ问题总结-2】
RocketMQ 消息持久化 Broker通过底层的Netty服务器获取到一条消息后,会把这条消息的内容写入到一个CommitLog文件里去(一个Broker进程就只有一个CommitLog文件,也就是说这个Broker上所有Topic的消息都会写入这个文件)。 同时&…...
掌握Android Fragment开发之魂:Fragment的深度解析(上)
Fragment是Android开发中用于构建动态和灵活界面的基石。它不仅提升了应用的模块化程度,还增强了用户界面的动态性和交互性,允许开发者将应用界面划分为多个独立、可重用的部分,每个部分都可以独立于其他部分进行操作。本文将从以下几个方面深…...
深度解读DreamFusion:一站式AI解决方案
DreamFusion是一款备受瞩目的人工智能解决方案,它整合了多种AI技术,为用户提供了一站式的解决方案。本文将全面解读DreamFusion,探讨其特点、功能和应用场景,助您深入了解这一创新工具。 1. 特点概述 DreamFusion具备以下显著特…...
JVM-02
字节码文件是一种特殊的文件格式,它包含了将源代码转换为机器可执行代码所需的指令集。字节码文件通常是由编译器将源代码编译为字节码的中间表示形式。 在Java中,字节码文件的扩展名为.class,它存储了编译后的Java代码。这些字节码文件可以在…...
【一起深度学习——NIN】
NIN神经网络 原理图:代码实现:输出结果: 原理图: 代码实现: import torch from torch import nn from d2l import torch as d2ldef nin_block(in_channels, out_channels, kernel_size, strides, padding):return nn.…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
DBAPI如何优雅的获取单条数据
API如何优雅的获取单条数据 案例一 对于查询类API,查询的是单条数据,比如根据主键ID查询用户信息,sql如下: select id, name, age from user where id #{id}API默认返回的数据格式是多条的,如下: {&qu…...
SpringTask-03.入门案例
一.入门案例 启动类: package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...
GO协程(Goroutine)问题总结
在使用Go语言来编写代码时,遇到的一些问题总结一下 [参考文档]:https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现: 今天在看到这个教程的时候,在自己的电…...
WPF八大法则:告别模态窗口卡顿
⚙️ 核心问题:阻塞式模态窗口的缺陷 原始代码中ShowDialog()会阻塞UI线程,导致后续逻辑无法执行: var result modalWindow.ShowDialog(); // 线程阻塞 ProcessResult(result); // 必须等待窗口关闭根本问题:…...
Xcode 16 集成 cocoapods 报错
基于 Xcode 16 新建工程项目,集成 cocoapods 执行 pod init 报错 ### Error RuntimeError - PBXGroup attempted to initialize an object with unknown ISA PBXFileSystemSynchronizedRootGroup from attributes: {"isa">"PBXFileSystemSynchro…...
EasyRTC音视频实时通话功能在WebRTC与智能硬件整合中的应用与优势
一、WebRTC与智能硬件整合趋势 随着物联网和实时通信需求的爆发式增长,WebRTC作为开源实时通信技术,为浏览器与移动应用提供免插件的音视频通信能力,在智能硬件领域的融合应用已成必然趋势。智能硬件不再局限于单一功能,对实时…...
FTXUI::Dom 模块
DOM 模块定义了分层的 FTXUI::Element 树,可用于构建复杂的终端界面,支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...
Springboot多数据源配置实践
Springboot多数据源配置实践 基本配置文件数据库配置Mapper包Model包Service包中业务代码Mapper XML文件在某些复杂的业务场景中,我们可能需要使用多个数据库来存储和管理不同类型的数据,而不是仅仅依赖于单一数据库。本技术文档将详细介绍如何在 Spring Boot 项目中进行多数…...
【Linux应用】Linux系统日志上报服务,以及thttpd的配置、发送函数
【Linux应用】Linux系统日志上报服务,以及thttpd的配置、发送函数 文章目录 thttpd服务安装thttpd配置thttpd服务thttpd函数日志效果和文件附录:开发板快速上手:镜像烧录、串口shell、外设挂载、WiFi配置、SSH连接、文件交互(RADX…...
