【效果图】
【代码】
<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 效果。