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="请选择短信模板" 
      @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;
};

原文地址：https://blog.csdn.net/weixin_43996999/article/details/145187611

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！