【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 效果。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值