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

ant-vue1.78版a-auto-complete表单自动搜索返回列表中的关键字标红

news 2026/2/6 10:46:52

a-auto-complete表单自动搜索返回列表中的关键字标红

通常在做关键字标红的场景，都是后端返回html结构，前端直接渲染实现，但是如果需要前端处理的话，实现也是很简单的，接下来我直接上应用场景吧
在这里插入图片描述
应用场景就是通过关键字去调接口，返回的列表前端去关键字标红，接下来我们看代码

//这里是元素结构代码块
<a-form-model-itemref="acceptCustomerName"label="啊实打实上的"prop="acceptCustomerName"><a-auto-completev-model="modalForm.acceptCustomerName"placeholder=""option-label-prop="value":defaultActiveFirstOption="false":allowClear="true":disabled="disabled"@select="onSelect"@search="onSearch">//这里的是搜索时候的表单插槽<template slot="default"><a-input v-model="modalForm.acceptCustomerName" :maxLength="100"></a-input></template>//这里是返回结果后的列表项的插槽<template slot="dataSource"><a-select-optionv-for="item in dataSourceInput":key="item.customerId":value="item.companyName"><a-row type="flex" justify="space-between" align="middle">//这里用来渲染我们处理后的带标红字段的dom<a-col v-html="item.companyNames"></a-col></a-row></a-select-option></template></a-auto-complete></a-form-model-item>

接下来就是我们接口调用后的处理逻辑了

onSearch(vText) {const params = {companyName: vText,page: {showCount: 30,currentNum: 1,},};getStandardCustomersLikeNameList(params).then(res => {let list = res.data.results.data;//接口拿到数据后，循环根据表单搜索的内容去做一个替换list.forEach(item => {this.$set(item,'companyNames',item.companyName.replace(vText, `<span style="color:red;">${vText}</span>`));});this.dataSourceInput = list;});},

相关文章：

ant-vue1.78版a-auto-complete表单自动搜索返回列表中的关键字标红

a-auto-complete表单自动搜索返回列表中的关键字标红 通常在做关键字标红的场景&#xff0c;都是后端返回html结构&#xff0c;前端直接渲染实现&#xff0c;但是如果需要前端处理的话&#xff0c;实现也是很简单的&#xff0c;接下来我直接上应用场景吧 应用场景就是通过关键…...

编程日记 2023/9/2 5:08:13

Elasticsearch 优化

Elasticsearch 优化 2.1硬件选择 Elasticsearch 的基础是 Lucene &#xff0c;所有的索引和文档数据是存储在本地的磁盘中&#xff0c;具体的 路径可在 ES 的配置文件 ../config/elasticsearch.yml 中配置&#xff0c;如下&#xff1a; #----------------------------…...

编程日记 2023/9/2 5:07:12

spring boot的自动装配原理

spring boot的自动装配原理 解释和使用关键技术思想总结 解释和使用 自动装配是什么&#xff1a;自动将第三方组件的bean装载到ioc容器里&#xff0c;不需要开发人员再去写bean相关的一些配置 spring boot怎么做&#xff1a;在启动类上加SpringBootApplication注解就可以实现自…...

编程日记 2023/9/2 5:06:10

走进低代码平台| iVX-困境之中如何突破传统

前言&#xff1a; “工欲善其事,必先利其器”&#xff0c;找到和使用一个优质的工具平台&#xff0c;往往会事半功倍。 文章目录 1️⃣认识走近低代码2️⃣传统的低代码开发3️⃣无代码编辑平台一个代码生成式低代码产品iVX受面性广支持代码复用如何使用&#xff1f; 4️⃣总结…...

编程日记 2023/9/2 5:05:09

【UIPickerView案例03-点餐系统之随机点餐 Objective-C语言】

一、先来看看我们这个示例程序里面，随机点餐是怎么做的 1.点击：“随机点餐”按钮 大家能想到，它是怎么实现的吗 1）首先，点击”随机点餐“按钮，的时候，你要让这个pickerView，进行随机选中，那么，得监听它的点击 2）然后呢，让pickeView选中数据， 3）然后呢，把那个…...

编程日记 2023/9/2 5:04:05

论文阅读_扩散模型_SDXL

英文名称: SDXL: Improving Latent Diffusion Models for High-Resolution Image Synthesis 中文名称: SDXL&#xff1a;改进潜在扩散模型的高分辨率图像合成 论文地址: http://arxiv.org/abs/2307.01952 代码: https://github.com/Stability-AI/generative-models 时间: 2023-…...

编程日记 2023/9/2 5:03:04

云原生Kubernetes:二进制部署K8S多Master架构（三）

目录 一、理论 1.K8S多Master架构 2.配置master02 3.master02 节点部署 4.负载均衡部署 二、实验 1.环境 2.配置master02 3.master02 节点部署 4.负载均衡部署 三、总结 一、理论 1.K8S多Master架构 (1) 架构 2.配置master02 &#xff08;1&#xff09;环境 关闭防…...

编程日记 2023/9/2 5:02:02

任意文件读取和下载

任意文件读取是什么&#xff1f; 一些网站的需求&#xff0c;可能会提供文件查看与下载的功能。如果对用户查看或下载的文件没有限制或者限制绕就可以查看或下载任意文件。这些文件可以是源代码文件配置文件敏感文件等等。过&#xff0c; 任意文件读取会造成(敏感)信息泄露;任意…...

编程日记 2023/9/2 5:01:01

mysql怎么查指定表的自增id?

要查看MySQL表的自增ID&#xff08;Auto Increment ID&#xff09;&#xff0c;你可以使用SHOW TABLE STATUS命令。以下是一个示例&#xff1a; SHOW TABLE STATUS LIKE your_table_name; 替换your_table_name为你想查询的表名。这条语句会返回表的一些基本信息&#xff0c;其…...

编程日记 2023/9/2 4:59:59

【C++设计模式】单一职责原则

2023年8月26日&#xff0c;周六上午 目录 概述一个简单的例子用单一职责原则来设计一个简单的学生管理系统 概述 单一职责原则&#xff08;Single Responsibility Principle&#xff0c;SRP&#xff09;&#xff0c;它是面向对象设计中的一个基本原则。 单一职责原则的核心思…...

编程日记 2023/9/2 4:58:57

Windows docker desktop 基于HyperV的镜像文件迁移到D盘

Docker desktop的HyperV镜像文件&#xff0c;默认是在C盘下 C:\ProgramData\DockerDesktop\vm-data\DockerDesktop.vhdx如果部署的软件较多&#xff0c;文件较大&#xff0c;或者产生日志&#xff0c;甚至数据等&#xff0c;这将会使此文件越来越大&#xff0c;容易导致C盘空间…...

编程日记 2023/9/2 4:57:56

LM-INFINITE: SIMPLE ON-THE-FLY LENGTH GENERALIZATION FOR LARGE LANGUAGE MODELS

本文是LLM系列文章&#xff0c;针对《LM-INFINITE: SIMPLE ON-THE-FLY LENGTH GENERALIZATION FOR LARGE LANGUAGE MODELS》的翻译。 LM-INFiNITE&#xff1a;大语言模型的一个简单长度上推广 摘要1 引言2 相关工作3 LLMs中OOD因素的诊断4 LM-INFINITE5 评估6 结论和未来工作 …...

编程日记 2023/9/2 4:56:55

ShardingSphere——压测实战

摘要 Apache ShardingSphere 关注于全链路压测场景下&#xff0c;数据库层面的解决方案。 将压测数据自动路由至用户指定的数据库&#xff0c;是 Apache ShardingSphere 影子库模块的主要设计目标。 一、压测背景 在基于微服务的分布式应用架构下&#xff0c;业务需要多个服…...

编程日记 2023/9/2 4:54:50

二分图-染色法-dfs

1.判断一个图是否是二分图当且仅当图中不包含奇数环 2. dfs当前边为1 他的临边为2 看是否满足条件 3. 注意图有可能不是连通图 import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.util.Arrays;public class BinaryG…...

编程日记 2023/9/2 4:53:48

SQL优化案例教程0基础（小白必看）

前提准备&#xff1a;本案例准备了100W的数据进行SQL性能测试&#xff0c;数据库采用的是MySQL&#xff0c; 总共介绍了常见的14种SQL优化方式&#xff0c;每一种优化方式都进行了实打实的测试&#xff0c; 逐行讲解&#xff0c;通俗易懂&#xff01; 一、前提准备 提前准备一…...

编程日记 2023/9/2 4:52:47

webpack（一）模块化

模块化演变过程 阶段一&#xff1a;基于文件的划分模块方式 概念&#xff1a;将每个功能和相关数据状态分别放在单独的文件里 约定每一个文件就是一个单独的模块&#xff0c;使用每个模块&#xff0c;直接调用这个模块的成员 缺点&#xff1a;所有的成员都可以在模块外被访问和…...

编程日记 2023/9/2 4:51:46

基于Java+SpringBoot+Vue前后端分离人力资源管理系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…...

编程日记 2023/9/2 4:50:45

安装配置mariadb

记录下安装配置mariadb的经历。 环境&#xff1a;ubuntu22 一、apt在线安装 apt代理配置 APT是Ubuntu系统中用于安装和升级软件包的工具&#xff0c;如果本地没有可用的软件包&#xff0c;APT将会连接到远程软件包服务器下载软件包。在某些情况下&#xff0c;用户需要将APT的…...

编程日记 2023/9/2 4:49:42

Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题

花了一个下午才解决&#xff0c;官方组件文档里面是没有处理方案说明的。 项目版本&#xff1a;Ant Design Vue 2.0.2 前端部分代码&#xff1a; <template><a-modal:visible"visible":width"windowWidth":height"800":title"tit…...

编程日记 2023/9/2 4:48:40

springboot1.5.12升级至2.6.15

首先&#xff0c;加入springboot升级大版本依赖&#xff0c;会在升级过程中打印出错日志提示&#xff08;升级完毕可去除&#xff09; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-properties-migrator</art…...

编程日记 2023/9/2 4:47:38

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/4 20:27:25

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2026/1/21 18:20:51

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

编程新知 2026/1/24 13:05:24

高危文件识别的常用算法：原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

编程新知 2026/1/31 6:09:20

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/12/19 20:46:15

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2026/1/30 4:47:24

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56