a-select 选择器可选择可输入字，匹配下拉框的数据

localhost@c_sdn

已于 2024-06-07 14:31:29 修改

阅读量1.1k

点赞数 3

分类专栏：前端文章标签： anti-design-vue

于 2024-04-09 08:25:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54122311/article/details/137534777

版权

前端专栏收录该内容

2 篇文章

订阅专栏

文章介绍了在Vue前端中，如何使用A-Form-Model-Item和A-SelectV-Model组件构建一个带有搜索功能的公司选择器，并强调了处理数据层级和返回逻辑时的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、直接代码展示

前端 html 写法

<a-form-model-item :label="$t('positionStatementUpload.company')">
    <a-select v-model="cform.companyCode" style="width: 270px" show-search :filter-option="filterOptionCompany">
        <a-select-option v-for="c in companyList" :value="c.code" :key="c.abbr">
             {{ c.abbr }}
        </a-select-option>
    </a-select>
</a-form-model-item>

js 写法

// 过滤公司
filterOptionCompany(input, option) {
    return option.data.key.toLowerCase().indexOf(input.toLowerCase()) >= 0;
},

a-select 选择器可选择可输入字，匹配下拉框的数据

1、直接代码展示

2、需要注意 js return 返回的时候，需要根据数据的层级来，最好打印 option 出来看看。