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;
};
相关推荐
光影少年3 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天5 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_5 小时前
HTML5(前端基础)
前端·html·html5
Jagger_5 小时前
敏捷开发流程-精简版
前端·后端
FIN66686 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing6 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1276 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿6 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66686 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy6 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript