关于Ant Design中 Select、DatePicker 和Menu组件下拉选项在页面滚动时，出现分离问题解决

最新推荐文章于 2024-07-19 15:03:40 发布
最新推荐文章于 2024-07-19 15:03:40 发布
阅读量1.1k 收藏
点赞数
分类专栏： 笔记 文章标签： javascript vue.js 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sx_lz_1119/article/details/122537975
版权
在使用Ant Design的Select、DatePicker和Menu组件时，遇到页面滚动时下拉选项分离的问题。分析发现，这是由于组件挂载位置导致的。解决方案是为每个组件设置getPopupContainer属性，如：<Select getPopupContainer={trigger => trigger.parentElement}>，并在全局或个别组件（如DatePicker）上进行相应配置，以确保下拉选项跟随其触发元素。
摘要由CSDN通过智能技术生成

关于Ant Design中 Select、DatePicker 和Menu组件下拉选项在页面滚动时，出现分离问题解决

  • Select组件

在这里插入图片描述

  • DatePicker组件

在这里插入图片描述

  • Menu组件

在这里插入图片描述

分析

组件的下拉框出现漂移，查看Ant Design官方文档给出的答案是因为，在建立组件后默认挂载在全局body上而不是父组件上，但是官方有给出了解决办法那就是 <Select getPopupContainer={trigger => trigger.parentElement}>

解决方案

  1. 在组件上逐个添加 getPopupContainer={trigger => trigger.p

最低0.47元/天 解锁文章
sx_lz_1119
关注
专栏目录
Ant Design for React的DatePicker日期组件设置默认显示中文的方法
07-23
在 Ant Design for React 的 DatePicker 日期组件中，默认情况下显示英文，但是在某些情况下，我们需要将其设置为中文。今天，我们将学习如何设置 Ant Design for React 的 DatePicker 日期组件的默认语言为中文。 ...
【ant design】解决Select，DatePicker，Cascader等组件选项框随页面滚动分离问题
weixin_55846296的博客
09-16 807
在开发过程中，会使用很多的Select、DatePicker等组件，当这些组件在可滚动的区域内滚动时，你会发现该组件的选项框也会跟着滚动，产生分离。如下图所示: <template> <a-config-provider :getPopupContainer="getPopupContainer"> <a-locale-provider :locale="locale" > <div id="app"> <rout
解决react + ant-design中Select下拉框分离随页面滚动问题
go
07-12 1377
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。 很多方法试了并没有成功，最后用下面的方法解决了这个bug。1、在Select组件标签内添加getPopupContainer属性： 2、在的上一层用包裹
ant design中select下拉框和日期选择器会被滚动分开
最新发布
weixin_42496938的博客
07-19 243
1、select 需要在select中加上:getPopupContainer=“(triggerNode) => triggerNode.parentNode”select下拉框和日期选择器展开时，如果父级有滚动条，会导致下拉框和下拉框选项分开，影响体验。2、date 日期需要加getCalendarContainer。
解决 ant 下拉框 日期选择框 跟随滚动
qq_36287830的博客
11-11 458
日期选择框 :getCalendarContainer="(trigger) => trigger.parentNode" 两种解决方式 不一样 不能通用 选择器下拉框 :getPopupContainer="(trigger) => trigger.parentNode"
ant design select组件 解决选项框随页面滚动分离问题
weixin_46449470的博客
07-01 2471
在ant design 使用过程中，发现页面内容超过一屏会出现选项框跟随滚动而滚动 其实这是官方组件存在的问题， getPopupContainer 菜单渲染父节点，默认渲染到 body 上。 使用getPopupContainer属性： select组件，Cascader组件 使用getCalendarContainer属性： DatePicker****组件 在antd的每个组件api中都有说明是使用getPopupContainer还是getCalendarContainer 1，getPopupCo
【Ant Design】Select组件下拉选项随页面滚动与Select框分离
丫丫不秃头噢---
01-10 783
问题描述： Select组件有个API ：getPopupContainer 同时官网也强调一个特殊情况需要注意： 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。 代码： <Select getPopupContainer={triggerNode => triggerN.
Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移
孜然卷的博客
02-01 726
Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用。将下拉弹层渲染节点固定在触发器的父元素中。
ant design vue datepicker日期选择器中文化操作
01-18
按照ant design vue官方说明，使用日期选择器需要在入口文件(main.js)全局设置语言： // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import moment from 'moment'; import 'moment/...
AntDesign组件库目录.docx
11-02
### AntDesign（Vue）组件库知识点详解 #### 一、通用组件 **1.1 Button 按钮** - **按钮类型**: 提供了多种类型的按钮，如主要按钮、次要按钮、虚线按钮等，满足不同场景下的需求。 - **图标按钮**: 可以将图标...
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
在实际项目中，例如`vueComponent-ant-design-vue-e94a0f0`这个文件夹中的示例，我们可以看到如何将AntDesignVue组件整合到Vue项目中，创建一个完整的页面。这通常包括导入所需组件、定义组件结构、绑定数据和事件...
Ant design vue 的组件禁用属性 disabled.pdf
12-16
在Ant Design Vue这一流行的前端UI库中，`disabled`属性是一个关键特性，它允许开发者禁用用户对特定组件的操作，从而实现对用户交互的控制。禁用状态通常用于表示组件处于不可操作或非活动状态，这在许多场景下都是...
关于ant design for vue 下拉框在页面滑动后无法跟随滑动
weixin_45685394的博客
03-22 1236
需要在页面中加入如下 :getPopupContainer="triggerNode => {return triggerNode.parentNode || document.body;}" 即可让下拉跟随移动 例如 <a-select v-model="SearchForm.settlementStatus" @dropdownVisibleChange="getSttlementStatus" :getPopupContainer="triggerNode => {return t
Ant Design vue中select下拉框组件偏移问题
first_shun的博客
09-12 4595
当使用antdesign vue中的select出现下拉框位置偏移的时候
antd vue 解决a-select在弹框中下拉菜单跟随页面滚动
jduksa的博客
04-14 3290
官方原话：如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentNode} 将下拉弹层渲染节点固定在触发器的父元素中 <a-select v-model="this.form.data" @change="handleChange" placeholder="签约状态" :
ant-design 关于select下拉框随着滚动条滚动的问题、选择器样式无法修改的问题
BoZai_ya的博客
07-13 4035
使用ant-design存在的问题 下拉框选项跟着滚动条动这个问题 选择器样式修改不生效
antd 的 Select组件的下拉框随页面滚动分离断层
小刘的日常bug记录
06-08 395
鼠标滚动页面，下拉框根据页面滚动而滚动从而导致断层。
antd的Select组件，Cascader组件，DatePicker等下拉选项随页面滚动分离问题
sumiao64427的博客
05-06 453
现象如下图 解决方法： 具体代码实现如下 <div class="form-input-item"> <div class="form-label form-require-icon">{{ $t("commonSetting.noOperationSetting") }}</div> <div class="form-field">
使用antd的Select组件，Cascader组件，DatePicker等下拉选项必须要添加的getPopupContainer（解决选项框随页面滚动分离问题）
热门推荐
Zeng__Yi的博客
10-29 3万+
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 这个属性,看似不重要的属性，却起着重大的作用。 效果图： 当数据比较多的，可以滚动的时候。点击选择框，滑动滚轮 没有添加这个属性的时候： 当没有这个属性的时候 随着滚动 选项会和选择框分离。 当添加这个属性后： 点击后滚动就不会分离 如...
在vue2项目中使用ant-design的DatePicker组件
05-30
在 Vue2 项目中使用 ant-design 的 DatePicker 组件，需要先按照上一个问题中的步骤安装和引入 ant-design-vue 和 moment 包。 然后在需要使用 DatePicker 的组件中，按照如下方式使用： ```vue <template> <div> <a-date-picker v-model="date" :disabledDate="disabledDate"></a-date-picker> </div> </template> <script> export default { data() { return { date: null, }; }, methods: { disabledDate(current) { // 自定义禁用日期的规则 return current && current < this.$moment().endOf('day'); }, }, }; </script> ``` 其中，`v-model` 绑定了选中的日期，`disabledDate` 方法可以自定义禁用日期的规则。在这个例子中，我们禁用了今天之前的所有日期。需要注意的是，如果你想要使用 ant-design-vue 的样式，还需要在 main.js 中引入 ant-design-vue 的样式文件： ```javascript import 'ant-design-vue/dist/antd.css'; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值