如何解决antd下拉框Select下拉列表和输入框分离的问题

最新推荐文章于 2024-09-14 23:20:37 发布
原创 最新推荐文章于 2024-09-14 23:20:37 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍如何在Select组件中使用getPopupContainer属性精确控制弹出菜单的父节点，通过示例和代码展示实现方法，适用于前端开发者解决定位问题。

在select中加入以下代码即可解决

 getPopupContainer = {triggerNode => triggerNode.parentNode}

如图：
在这里插入图片描述

解决antd的select下拉框因为数据量太大造成卡顿的问题
SSophia的博客
04-22 2433
现在实现了滚动加载功能和模糊查询功能，但表单的编辑回显出现了问题，显示的是id,原因是后端返回的数据但是在已经加载的列表中还未加载。问了前端大哥，它提供了一种思路，就是把后端返回数据造成现在列表数据的形式，然后在滚动加载的时候每次先把后端返回的数据过滤掉，然后再push进去，也就是说每次加载都要先判断一下编辑会显的数据在不在这次要push的数据中，emm，所以改实现方式了！但是，现在的滚动加载和模糊查询是实现了的。唉，要推翻重写了，记录一下。 ![在这里插入图片描述](https://img-bl...
vue3.0封装dropdown下拉菜单
峰会路转的博客
07-10 3990
vue3.0出来已经有段时间的了，也与必要开始研究它了！ 先看下我们要实现的效果 很常见的展开显示菜单项的内容，在vue3.0里面怎么开发，这里样式我们用的是bootstrap的默认样式 思路一: <DropDown :title="'退出'" :list="menuLists" /> 思路二: <drop-down :title="'退出'"> <drop-dowm-item>新建文章</drop-down-item> <dro
Android零基础入门第46节：下拉框Spinner
weixin_34146410的博客
08-26 4042
2019独角兽企业重金招聘Python工程师标准>>> ...
Ant Design Modal 中Select组件下拉选项随页面滚动与Select框分离
qq_40021015的博客
03-01 1639
其实这是官方组件存在的问题， getPopupContainer 菜单渲染父节点，默认渲染到 body 上。 使用getPopupContainer属性： select组件，Cascader组件 使用getCalendarContainer属性： DatePicker****组件 在antd的每个组件api中都有说明是使用getPopupContainer还是getCalendarContainer 1，getPopupContainer属性的，可以直接使用 getPopupContainer={trigg
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug
F-two的博客
08-25 1630
解决 antd 的 Select组件的下拉框随页面滚动而分离的bug （V4.16.13） <Form.Item label="关联团队" name="team" required> <Select placeholder="请选择已有团队" onChange={(value) => { formRef.current &&
解决antd下拉框a-select下拉列表和输入框分离的问题
灿灿大王搭建的黄金屋
11-20 2608
问题多出现在弹窗内使用a-select的情况中，当打开下拉框的情况下，滑动页面，会发现下拉列表和输入框分离了 这种情况只需要在a-select标签内加上以下属性就可以 :getPopupContainer="(trigger) => trigger.parentElement" 完整代码： <a-tree-select multiple placeholder="请选择所属角色类型" all
Antd 模拟Selcet下拉框组件支持选择和自定义输入
伊布拉希布维奇的博客
08-09 1307
业务需要支持选择和自定义输入，百度了一圈找到一些思路，这里主要有一个坑的点是AutoComplete组件不像Select组件一样有label和value，它只有value属性。 效果图如下： 代码如下： 我的options结构，记得把displayName映射为label options = [ { displayName: '2', value: '22027',.
antd select label 和下拉label不一致实现
王为仁的博客
02-19 4404
antd select label 和下拉label不一致实现正常的形式要实现这种效果呢？代码如下 正常的形式 要实现这种效果呢？ 代码如下 codepen链接 const { Select } = antd; const Option = Select.Option; const children = []; for (let i = 10; i &lt; 36; i++) { ch...
深入理解Antd-Select组件的用法
10-15
在Ant Design（Antd）框架中，Select组件是一个常用的下拉选择控件，它提供了丰富的功能和多种类型的实现，能够满足各种复杂的UI交互需求。本文将深入探讨Antd-Select组件的不同类型及其潜在的优化策略。 一、Antd-...
react antd select下拉框选中一个值后变为输入框
03-30
在Ant Design的Select组件中，可以使用mode属性来设置下拉框的模式。默认情况下，mode属性的值为 "default"，表示下拉框只能选择预设的选项。如果将mode属性的值设置为 "tags"，则可以在下拉框中输入自定义的选项。 ...
【Ant Design】Select组件下拉选项随页面滚动与Select框分离
丫丫不秃头噢---
01-10 925
问题描述： Select组件有个API ：getPopupContainer 同时官网也强调一个特殊情况需要注意： 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 getPopupContainer={triggerNode => triggerNode.parentElement} 将下拉弹层渲染节点固定在触发器的父元素中。 代码： <Select getPopupContainer={triggerNode => triggerN.
解决页面滚动, ant design的select框和选项分离问题, 同时理解ant的html设计技巧.
n6308的博客
08-25 323
通过解决我们也学一下ant的html/css设计技巧. 现象 滚动的时候, 这里"负责人"的选项和select框已经分离了. 我用的vue版本的, 我看了下react版本的api设计, 我想2个都会出现这特殊情况. 原因 点击select的时候, ant做了2件事情: 1. 生成"选项列表div"放在body的尾部. 2. "选项列表div"会根据select相对于body元素计算当...
bootstrap的select2下拉框在modal弹框下输入框不显示，官方解决办法：设置dropdownParent
lisheng19870305的专栏
08-05 2251
采用select2控件，在bootstrap的modal弹框中，会出现下拉框中没有输入框。网上走一圈，基本上解决办法都是2个，但我要说的是：这2个方法都不是最好的。因为官方就有解决方案，而且非常简单。官方解决办法：设置dropdownParent。...
v-select下拉弹出项遮挡input框
qq_44092391的博客
11-26 811
vuetify中的v-select组件
ant中select-dropdown遮盖选择框及定位问题
lowers_1的博客
08-15 4794
ant中select-dropdown遮盖选择框及定位问题
Antd select dropdown 样式修改
jackliujay的博客
09-26 5202
antd select dropdownclassname
Antd下拉框会漂浮脱离的问题
MyName469的博客
09-13 772
<a-select :getPopupContainer=" (triggerNode) => { return triggerNode.parentNode || document.body } " ...
antd Select组件 和 Dropdown组件 踩坑·记
青蛙king的博客
03-16 6539
1、Select组件，展开下拉框后，滑动滚轮，下拉框会跟着上下滑动 解决： <Select getPopupContainer={trigger => trigger.parentNode} > 2、Select组件，上下滑动下拉框里的数据，数据自动变了 解决： ...
解决antd-design-vue给选择组件a-select下拉菜单ant-select-dropdown设置样式不生效
最新发布
此人很懒，什么都没有写
09-14 1673
实现效果：正常a-select会根据分辨率、缩放比例动态计算位置等，现在web端已经实现自适应分辨率，需要给下拉菜单设置固定的定位和宽度等样式，不让组件自动瞎设置定位、大小。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值