a-select e-select 搜索功能自定义搜索的内容

沙尘暴炒饭

于 2024-08-08 13:46:49 发布

阅读量335

点赞数 3

文章标签：数据库

本文链接：https://blog.csdn.net/m0_71835253/article/details/141024826

版权

原因：通常用到select的时候展示的是name，而获得的是id，同样在搜索的时候用户一般只用搜索name，而在antd中加上show-search后发现是按id搜索，而不是name。

解决办法：添加 optionFilterProp="label" ，就可以实现绑定的是id ，搜索的是name(我的代码是label 和 value)

  <a-form-item name="distinction" label="相别" :rules="[{ required: true, message: '相别不能为空' }]">
              <a-select placeholder="请选择相别" v-model:value="jobAddUpdateForm.distinction" allowClear show-search optionFilterProp="label">
                <a-select-option v-for="item in conductorSerial" :key="item.value" :value="item.value" :label="item.label">{{ item.label }}</a-select-option>
              </a-select>
            </a-form-item>