【AntDesign】下拉框选中后显示选中项之input输入框实现

【效果图】

【代码】

<div class="conditions">
      <a-form layout="inline">
        <a-form-item label="时间范围">
          <a-range-picker @change="onSearch" class="time_width" :disabled-date="disabledDate" v-model="searchParams.dateRange"/>
        </a-form-item>
        // input组件实现下拉选项
        <a-form-item label="查询" style="margin-left:20px;">
          <a-input-group compact>
            <a-select
              style="width: 160px;"
              v-model="searchParams.property"
              show-search
              placeholder="请选择属性"
              @change="handleProperty">
              <a-select-option :key="item.id" v-for="item in optionList" :value="item">{{ item.name }}</a-select-option>
            </a-select>
            <a-select
              style="width: 160px;"
              v-model="searchParams.status"
              show-search
              placeholder="请选择状态代码"
              @change="onSearch">
              <a-select-option :key="e.value" v-for="e in statusList" :value="e.value">{{ e.value }}-{{ e.name }}</a-select-option>
            </a-select>
          </a-input-group>
        </a-form-item>
      </a-form>
    </div>

【注意】 placeholder绑定属性声明是一定要是 undefined !!!

data () {
    return {
      // 查询条件
      searchParams: {
        dateRange: [moment().add(-7, 'days'), moment()], // 开始和结束时间
        property: undefined,
        status: undefined
      },
    }
  },

【其他】

1、之前试过< a-dropdown-button >下拉菜单实现，但它本质还是一个 buttton ，可以显示下拉项但是选中后无法显示在原位置【舍弃】

2、也试过< select>下拉选择器，但是没法设置 placehoder【舍弃】

3、< select> + <a-input-group>最终实现 ui 效果。