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

使用的数据未带有label和value字段的情况下,实现前端静态模糊搜索
如果没有使用a-select-option的情况下,我们只需要把源数据使用map方法加上label和value即可
如果使用了a-select-option标签,那么就在a-select-option标签上定义key或者label即可,这样在filterOption函数的option就可以拿到key或者label,然后就可以自定义过滤了

示例
dart 复制代码
<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="请选择短信模板" 
      @change="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;
};
相关推荐
德育处主任6 分钟前
p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型
前端·前端框架·canvas
文火冰糖的硅基工坊17 分钟前
[硬件电路-124]:模拟电路 - 信号处理电路 - 测量系统的前端电路详解
前端·嵌入式硬件·fpga开发·架构·信号处理·电路
爷_1 小时前
手把手教程:用腾讯云新平台搞定专属开发环境,永久免费薅羊毛!
前端·后端·架构
狂炫一碗大米饭1 小时前
如何在 Git 中检出远程分支
前端·git·github
东风西巷2 小时前
猫眼浏览器:简约安全的 Chrome 内核增强版浏览器
前端·chrome·安全·电脑·软件需求
太阳伞下的阿呆2 小时前
npm安装下载慢问题
前端·npm·node.js
533_2 小时前
[vue3 echarts] echarts 动态数据更新 setInterval
vue.js·echarts
pe7er2 小时前
Tauri 应用打包与签名简易指南
前端
前端搬砖仔噜啦噜啦嘞2 小时前
Cursor AI 编辑器入门教程和实战
前端·架构
Jimmy2 小时前
TypeScript 泛型:2025 年终极指南
前端·javascript·typescript