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

Ant Design Vue --- select组件静态实现模糊搜索

使用的数据未带有label和value字段的情况下,实现前端静态模糊搜索

如果没有使用a-select-option的情况下,我们只需要把源数据使用map方法加上label和value即可

如果使用了a-select-option标签,那么就在a-select-option标签上定义key或者label即可,这样在filterOption函数的option就可以拿到key或者label,然后就可以自定义过滤了

示例
<a-form-item name="serviceUserName" ref="serviceUserName" :label-col="{ 'span': 4 }">
    <template #label>
        <span><span style="color: red;">*</span>短信模板</span>
    </template>
    <a-select 
      size="small" 
      v-model:value="data.templateId" 
      placeholder="请选择短信模板" 
      ="selectChange('templateId', data.templateId)"
      show-search 
      :filter-option="filterOption"
      allowClear
    >
        <a-select-option 
        	v-for="item in data.messagetemplateData" 
        	:value="item.templateId" 
        	:label="item.name"
        >{{ item.name }}</a-select-option>
    </a-select>
</a-form-item>

const filterOption = (input: string, option: any) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};

http://www.kler.cn/a/508250.html

相关文章:

  • 如何选择合适的服务器?服务器租赁市场趋势分析
  • 语义检索效果差?深度学习rerank VS 统计rerank选哪个
  • 微软开源GraphRAG的使用教程(最全,非常详细)
  • Python操作Excel——openpyxl使用笔记(3)
  • 代码随想录 字符串 test5
  • 【机器学习实战入门】使用 Pandas 和 OpenCV 进行颜色检测
  • 运维作业二
  • 【王树森推荐系统】概要03:推荐系统的AB测试
  • Starrocks 开启 Ranger 权限认证支持
  • 《机器学习》——K-means聚类
  • Java中 try-with-resources 自动关闭资源的使用
  • 【Uniapp-Vue3】showActionSheet从底部向上弹出操作菜单
  • http转化为https生成自签名证书
  • 高级编程语言的基本语法在CPU的眼中是什么样的呢?
  • javaEE初阶————多线程初阶(2)
  • 混淆矩阵 confusion matrix 怎么看 -- 识别涉黄图片的二分类为例 - 识别毒品的多分类案例解释
  • Freeswitch使用media_bug能力实现回铃音检测
  • [创业之路-249]:《华为流程变革:责权利梳理与流程体系建设》核心内容
  • 【GIS系列】打造3维GIS数字孪生效果系统:Cesium+Mapbox+SpringBoot完美实现解析
  • Spring Boot--@PathVariable、@RequestParam、@RequestBody
  • 如何使用 Go语言操作亚马逊 S3 对象云存储
  • 【Cesium入门教程】第一课:Cesium简介与快速入门详细教程
  • 机器学习——集成学习、线性模型、支持向量机、K近邻、决策树、朴素贝叶斯、虚拟分类器分析电动车数据集Python完整代码
  • boss直聘 __zp_stoken__ 分析
  • 【Unity3D】远处的物体会闪烁问题(深度冲突) Reversed-Z
  • 【Go】Go Gorm 详解