ant design 下拉选择框在鼠标滑动时脱离页面的解决方法

最新推荐文章于 2025-12-06 22:07:37 发布
原创 最新推荐文章于 2025-12-06 22:07:37 发布 · 440 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

getPopupContainer = {trigerNode => trigerNode.parentElement }

bluro
关注
ant-design-vue 下拉框随页面滚动问题
Jack, what else can you do besides holding your little darling?
08-24 643
ant-design-vue 下拉框随页面滚动问题
Vue antdv 下拉菜单不跟着滚动走（getPopupContainer 使用）
热门推荐
卡尔特斯
10-22 1万+
在使用阿里的 Ant Design Vue 框架时，在使用有下拉菜单 a-select 等组件，用在 a-drawer 等组件或者页面上的时候，会发现 a-drawer 等组件能滚动的时候，a-select 等组件的下拉菜单不会跟着走，停留在原地。 这是滚动之后停留在原地的状态： 但是我们希望在滚动的时候，下拉菜单也是需要跟着滚动，一直悬浮在输入框下面，这是正常状态： a-select 代码需要这么写 <a-select :getPopupContainer="(trigg..
解决antd下拉框a-select下拉列表和输入框分离的问题
灿灿大王搭建的黄金屋
11-20 2599
问题多出现在弹窗内使用a-select的情况中，当打开下拉框的情况下，滑动页面，会发现下拉列表和输入框分离了 这种情况只需要在a-select标签内加上以下属性就可以 :getPopupContainer="(trigger) => trigger.parentElement" 完整代码： <a-tree-select multiple placeholder="请选择所属角色类型" all
Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移
孜然卷的博客
02-01 1259
Antd中使用Select框 在点出弹出下拉列表后 鼠标移到外面滚动会导致下拉框位置偏移 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用。将下拉弹层渲染节点固定在触发器的父元素中。
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug
F-two的博客
08-25 1605
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug （V4.16.13） <Form.Item label="关联团队" name="team" required> <Select placeholder="请选择已有团队" onChange={(value) => { formRef.current &&
【Ant Design】下拉列表Select 、日期选择框DatePicker等跟随滚动条上下移动解决方案
爱酸的博文
09-16 1660
属性不会更新，因此组件会随着滚动条上下移动。当滚动条滚动时，初始化计算的。
antDesign下拉选择框滚动条常驻( Select TreeSelect通用)
Dissolute_的博客
05-05 2093
让antDesign的下拉框选择组件滚动条常驻，针对:global方式不生效的情况
vue3 + AntDesign列表多选，分页触底刷新，模糊查询操作
m0_71207979的博客
04-15 321
开箱即用，可以添加修改逻辑，实现更多的功能...
AntDesign3.9.x_Axure.zip
12-21
在Axure中导入AntDesign3.9.x_Axure_20180903.rplib元件库，设计师可以立即使用AntDesign的预设样式和组件，快速搭建符合AntDesign风格的Web界面原型，大大提高了设计效率。 首先，AntDesign3.9.x_Axure元件库中的...
ant design vue 组件随页面滚动漂浮，已解决a-select a-input a-date-picker
qq_45530512的博客
09-08 3434
ant design vue 组件随页面滚动漂浮，已解决a-select a-input a-date-picker
设置antdesin的弹窗组件a-modal为点击弹窗外和esc弹窗不关闭
m0_61101059的博客
05-30 968
【代码】设置antdesin的弹窗组件a-modal为点击弹窗外和esc弹窗不关闭。
4. Ant Design PC UI组件 Input输入框事件 快速上手教程
04-04 1047
在输入改变事件处理函数中，AI逻辑语句中填入 控制台调试输出 "输入改变事件处理"，点击预览代码，AI将自动生成出JS代码。在失焦事件处理函数中，AI逻辑语句中填入 控制台调试输出 "失焦事件处理"，点击预览代码，AI将自动生成出JS代码。右键点击 输入改变事件处理函数，复制 开发标识，粘贴到 输入框 输入改变事件方法中。右键点击 失焦事件处理函数，复制 开发标识，粘贴到 输入框 失焦事件方法中。选择输入框事件，这里我们添加 一个 输入改变事件，和一个失焦事件。右键点击输入框组件，事件。
关于Ant Design Vue下拉框随着鼠标滚动的问题
m0_52449484的博客
10-08 366
解决Ant Desin Vue下拉框随着鼠标滚动的问题
ant design中select下拉框和日期选择器会被滚动分开
weixin_42496938的博客
07-19 413
1、select 需要在select中加上:getPopupContainer=“(triggerNode) => triggerNode.parentNode”select下拉框和日期选择器展开时，如果父级有滚动条，会导致下拉框和下拉框选项分开，影响体验。2、date 日期需要加getCalendarContainer。
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 857
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
深度解析前端input标签：从默认样式覆盖到浏览器自动填充和兼容以及文本域
鹏多多的博客
12-03 991
HTML表单中的<input>标签是核心交互元素，支持多种输入类型（如文本、密码、单选、文件上传等），通过type属性定义不同功能。其核心属性包括数据标识（name/id）、状态控制（disabled/readonly）、验证限制（pattern/maxlength）和交互优化（autofocus/autocomplete）。浏览器默认样式存在兼容性问题，可通过CSS重置实现统一外观，特别是对单选/复选框需要特殊样式覆盖处理。自动填充功能基于name属性和表单上下文触发，可通过autocompl
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 1195
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
学Java第五十三天——IO综合练习（1）
最新发布
weixin_67566799的博客
12-06 263
是用的糊涂包Hutool，其余的。完整的获取姓氏的代码。
前端仿真驱动创新：西门子FLOEFD的行业价值与应用指南
anscos的博客
12-05 1061
西门子Simcenter FLOEFD作为嵌入CAD的CFD解决方案，精准击中了现代研发“高效迭代、精准预判”的核心需求，其技术革新与应用实践为多行业带来了研发模式的重构，成为高端装备设计不可或缺的核心工具。西门子FLOEFD以“CAD原生、智能高效、多场协同”为核心，打破了设计与仿真的壁垒，尤其适配新能源、电子、增材制造等快速迭代的行业。其价值不仅在于缩短研发周期、降低试验成本，更在于推动工程师将“仿真思维”融入设计全流程，实现从“经验驱动”到“数据驱动”的转型。
Ant Design Vue表格内下拉框滑动
01-18
### 实现带有滚动条的下拉选择框 为了实现在 Ant Design Vue 的表格组件内嵌入带滚动条的选择框，可以采用如下 CSS 和配置方式来确保多选框不会换行并提供水平滚动功能。 对于 `.ant-select-selection--multiple` 类应用特定样式以控制溢出行为和最大高度： ```css .ant-select-selection--multiple { overflow-x: auto; overflow-y: hidden; max-height: 33px; } ``` 同时调整内部渲染元素的行为使其在同一行显示而不自动折行，并通过 `inline-flex` 属性保持布局紧凑[^1]： ```css .ant-select-selection--multiple .ant-select-selection__rendered { white-space: nowrap; display: inline-flex; } ``` 另外，在处理页面滚动时可能出现的位置偏移问题，可以通过设置 `getPopupContainer` 来指定弹出层相对于哪个容器定位。这有助于防止因页面滚动而导致的选择项位置错乱[^2]: ```javascript { getPopupContainer: (triggerNode) => triggerNode.parentNode, } ``` 针对更复杂的场景比如模态框中的下拉列表，则需注意样式的隔离以免影响全局样式或其他组件的表现[^3]。 最后，如果希望进一步增强用户体验，还可以考虑封装自定义输入控件，例如结合 Input 组件与 Table 表格创建可编辑单元格，允许用户点击后展开更多选项进行选择[^4]。 #### 示例代码片段展示如何集成上述特性至表格列定义中: ```vue <template> <a-table :columns="columns" :data-source="dataSource"> <!-- 其他属性 --> </a-table> </template> <script> export default { data() { return { columns: [ { title: '操作', dataIndex: 'action', scopedSlots: { customRender: 'action' }, }, // ...其他列... ], dataSource: [], // 数据源数组 }; }, }; </script> <style scoped> /* 应用于当前作用域内的样式 */ .ant-select-selection--multiple { overflow-x: auto; overflow-y: hidden; max-height: 33px; } .ant-select-selection--multiple .ant-select-selection__rendered { white-space: nowrap; display: inline-flex; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值