选择器如下:
滚动条滚动之后:
原本代码
<div class="title">提交方式</div>
<a-form-model-item ref="submitType" prop="submitType" class="select-item">
<a-select v-model="form.submitType" >
<a-select-option v-for="item in typeArray" :key="item.id" :value="item.value" >
{{ item.name }}
</a-select-option>
</a-select>
根据官方文档感觉没啥问题
我一直以为是我写的定位问题,结果找了许久发现官方文档的隐藏属性getPopupContainer
,
直接使用 getPopupContainer={triggerNode => triggerNode.parentNode}
所以代码改为
<div class="title">提交方式</div>
<a-form-model-item ref="submitType" prop="submitType" class="select-item">
<a-select v-model="form.submitType" :getPopupContainer="triggerNode=> triggerNode.parentNode">
<a-select-option v-for="item in typeArray" :key="item.id" :value="item.value" >
{{ item.name }}
</a-select-option>
</a-select>
直接解决问题。
总结:
1.select组件,Cascader组件使用 :
加getPopupContainer属性,直接使用 getPopupContainer={triggerNode => triggerNode.parentNode},像上面所示:
2.日期、时间类的组件(DatePicker、TimePicker)
加getCalendarContainer属性,像下面所示:
<a-range-picker
@change="changeRangeList"
:value="dateRangeListVal"
:placeholder="['选择起始日期', '选择截至日期']"
:getCalendarContainer="triggerNode=> triggerNode.parentNode"
/>