ant design中select下拉框和日期选择器会被滚动分开

jojo是只猫

已于 2024-07-23 15:29:30 修改

阅读量326

点赞数 2

文章标签：前端 javascript 数据库

于 2024-07-19 15:03:40 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_42496938/article/details/140549811

版权

select下拉框和日期选择器展开时，如果父级有滚动条，会导致下拉框和下拉框选项分开，影响体验

1、select 需要在select中加上:getPopupContainer=“(triggerNode) => triggerNode.parentNode”
使用时间日期组件

 <a-select v-model="value" placeholder="请选择"  :getPopupContainer="(triggerNode) => triggerNode.parentNode">
    <a-select-option
      v-for="item in list"
      :key="item.value"
      :value="item.value"
    >
      {{ item.name }}
    </a-select-option>
  </a-select>

2、date 日期需要加getCalendarContainer

<a-date-picker
  format="YYYY-MM-DD"
  placeholder="请选择"
  :getCalendarContainer="
    (triggerNode) => {
      return triggerNode.parentNode;
    }
  "
  allowClear
/>