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;
};
相关推荐
Mintopia7 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
Mintopia7 分钟前
🎬《Next 全栈 CRUD 的百老汇》
前端·后端·next.js
AryaNimbus22 分钟前
你不知道的Cursor系列:如何使用Cursor同时开发多项目?
前端·ai编程·cursor
国家不保护废物26 分钟前
Function Call与MCP:给AI插上连接现实的翅膀
前端·aigc·openai
500佰27 分钟前
阿里Qoder AI 新开发工具,长期记忆、Wiki和Quest模式是它的独有特性
前端
Juchecar28 分钟前
Vue3 Class 和 Style 绑定详解
前端·vue.js
coding随想28 分钟前
揭秘DOM键盘事件:从基础到高级技巧全解析!
前端
xianxin_31 分钟前
CSS Position(定位)
前端
xianxin_31 分钟前
CSS Float(浮动)
前端
掘金安东尼35 分钟前
Nuxt 4.0 发布!有哪些新特性?
前端·面试·github