antd的select支持label多个字段组成

399 阅读1分钟

业务上有需求,下拉框显示要多字段组合成一个文本

效果如下: image.png

select支持过滤,那多个字段如何支持搜索,直接上代码:重点关注下:label=的这一行

<template #ptnameStSelect="{ model, field }">
              <div class="flex items-center">
                <Select
                  allowClear
                  showSearch
                  placeholder="请选择"
                  v-model:value="model[field]"
                  optionFilterProp="label"
                  :disabled="detailInfo?.auditState === 2"
                >
                  <SelectOption
                    v-for="(item, index) in customerList"
                    :value="item.ptname_st"
                    :key="index"
                    :label="`${item.ptname_qk} - ${item.ptname_st}`"
                    >{{ item.ptname_qk }} - {{ item.ptname_st }}</SelectOption
                  ></Select
                >
              </div>
            </template>