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

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

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;});},
http://www.lryc.cn/news/149664.html

相关文章:

  • Elasticsearch 优化
  • spring boot的自动装配原理
  • 走进低代码平台| iVX-困境之中如何突破传统
  • 【UIPickerView案例03-点餐系统之随机点餐 Objective-C语言】
  • 论文阅读_扩散模型_SDXL
  • 云原生Kubernetes:二进制部署K8S多Master架构(三)
  • 任意文件读取和下载
  • mysql怎么查指定表的自增id?
  • 【C++设计模式】单一职责原则
  • Windows docker desktop 基于HyperV的镜像文件迁移到D盘
  • LM-INFINITE: SIMPLE ON-THE-FLY LENGTH GENERALIZATION FOR LARGE LANGUAGE MODELS
  • ShardingSphere——压测实战
  • 二分图-染色法-dfs
  • SQL优化案例教程0基础(小白必看)
  • webpack(一)模块化
  • 基于Java+SpringBoot+Vue前后端分离人力资源管理系统设计和实现
  • 安装配置mariadb
  • Ant Design Vue 日期选择器DatePicker传给后台日期参数格式问题
  • springboot1.5.12升级至2.6.15
  • Android Event事件分发(新版本)
  • 可控生成:ControlNet原理
  • 【极客时间】MySQL 必知必会-20230901
  • 53 个 CSS 特效 3(完)
  • 简单数学题:找出最大的可达成数字
  • [C++ 网络协议] 套接字的多种可选项
  • 2022年03月 C/C++(五级)真题解析#中国电子学会#全国青少年软件编程等级考试
  • ***数据转换中常用的两个函数 sscanf,sprintf
  • 软件工程(十九) 软件测试
  • go中读写锁(rwmutex)源码解读实现原理
  • 【人工智能】—_深度优先搜索、代价一致搜索、深度有限搜索、迭代深度优先搜索、图搜索