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

这篇具有很好参考价值的文章主要介绍了ant-vue1.78版a-auto-complete表单自动搜索返回列表中的关键字标红。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

通常在做关键字标红的场景,都是后端返回html结构,前端直接渲染实现,但是如果需要前端处理的话,实现也是很简单的,接下来我直接上应用场景吧
ant-vue1.78版a-auto-complete表单自动搜索返回列表中的关键字标红,anti-design-vue,vue,前端
应用场景就是通过关键字去调接口,返回的列表前端去关键字标红,接下来我们看代码

//这里是元素结构代码块
<a-form-model-item
   ref="acceptCustomerName"
   label="啊实打实上的"
   prop="acceptCustomerName">
   <a-auto-complete
     v-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-option
         v-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>

接下来就是我们接口调用后的处理逻辑了文章来源地址https://www.toymoban.com/news/detail-683390.html

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表单自动搜索返回列表中的关键字标红的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ant.design(简称antd)中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合

            ant.design(简称antd)现在我们使用较为广泛,web端中后台表单使用非常广泛,此遍文章集合了表单日常用法及使用注意事项。         下图是UI目标样式图                           1、以下是一个组件,首先引入ant相关依赖,在引入react相关依赖,主要使用了For

    2024年02月13日
    浏览(59)
  • 小试Blazor——实现Ant Design Blazor动态表单

    前言 最近想了解下Blazor,于是尝试使用Blazor写一个简单的低代码框架,于是就采用了Ant Design Blazor作为组件库 低代码框架在表现层的第一步则是动态表单,需要将设计时的结构渲染成运行时的表单,本次主要实现动态表单,相关数据接口都以返回固定数据的形式实现 实现

    2024年02月10日
    浏览(48)
  • ant a-form/a-form-model用法(组件使用、表单验证、数据收集、数据重置、数据提交)

     组件使用  绑定数据  定义form 提交数据,表单验证  打开表单时,内容重置 / 单个设置表单内容  获取表单内容 打开表单后,将整条数据对应填写到表单 有的时候可能会报错: 报错的话加一下this.$nextTick(()={})  组件使用 data: 提交 重置  至于修改、获取form中绑定的值,直

    2024年02月16日
    浏览(43)
  • 前端vue经典面试题78道(重点详细简洁)

    目录 1.自我介绍 2.vue面试题 1.v-show和v-if区别的区别: 2.为何v-for要用key 3.描述vue组件声明周期mm 单组件声明周期图 ​父子组件生命周期图 4.vue组件如何通信 5.描述组件渲染和更新的过程 1、vue 组件初次渲染过程 2、vue 组件更新过程 6.双向数据绑定v-model的实现原理 7.对mvvm的理

    2024年02月01日
    浏览(47)
  • nodejs+vue+elementui小区物业管理系统_78ahx

     课题主要分为四大模块:即管理员模块,物业管理模块、业主模块和维修员模块,主要功能包括:个人中心、物业管理、业主管理、维修员管理、小区公告管理、小区信息管理、房产信息管理、车位信息管理、停车位管理、停车信息管理、缴费信息管理、投诉分类管理、投

    2024年02月13日
    浏览(42)
  • vue3+ant design vue+ts实战【ant-design-vue组件库引入】

    🔥🔥更多内容见Ant Design Vue官方文档 🔥点击复习vue3【watch检测/监听】相关内容 👏👏👏一个好项目的编写不仅需要完美的逻辑,以及相应的技术,同时也需要一个 设计规范的高质量UI组件库 。👏👏👏本期文章将会详细讲解 Ant Design of Vue 组件库的 安装、使用、引入 。

    2024年02月02日
    浏览(50)
  • vue2安装ant-design UI报错 ERR! peer vue@“>=3.2.0“ from ant-design-vue@3.2.15

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: default@0.1.0 npm ERR! Found: vue@2.7.14 npm ERR!   vue@\\\"^2.6.10\\\" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer vue@\\\"=3.2.0\\\" from ant-design-vue@3.2.15 npm ERR! node_modules/ant-design-vue npm ERR!   ant-design

    2024年02月01日
    浏览(55)
  • ant design vue 的getPopupContainer

    在 ant design vue 中,有几个组件是有 getPopupContainer 属性的,比如:下拉菜单 默认是渲染到body 上的,所以如果你想要对 下拉选择组件 的样式,做修改,如果 style 标签上开启了 scoped,肯定不会生效 所以,需要指定 getPopupContainer ,用法如下

    2024年02月08日
    浏览(44)
  • Ant Design Vue 修改表格头部样式

    在网上搜了好多修改表格头部样式的,最后自己摸索出来,分享给大家,最后附上完整代码。 首先用到的是 customHeaderRow 这个API,类型是一个函数 此图是 console.log(conlumn); 打印出来的 可以看到每一列都有一个className

    2024年02月11日
    浏览(43)
  • ant vue table表格数据动态合并

    antd 表格动态行合并 合并效果 步骤方法 1.在computed节点下动态计算每次要合并的行数 2.在methods节点下定义合并单元格的方法 3.如果是一次性获取所有数据进行分页的话,计算columns的时候需要进行修改一下 参考文章:ant design vue 动态表格合并 合并效果 如果我们想要实现名称

    2024年02月10日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包