解决antd-design-vue给选择组件a-select下拉菜单ant-select-dropdown设置样式不生效

已于 2025-02-04 11:24:50 修改
阅读量1.2k 收藏 2
点赞数 2
分类专栏： workStudy 文章标签： vue.js javascript css dropdown a-select 样式设置
于 2024-09-14 23:20:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46099269/article/details/142267832
版权

实现效果：正常a-select会根据分辨率、缩放比例动态计算位置等，现在web端已经实现自适应分辨率，需要给下拉菜单设置固定的定位和宽度等样式，不让组件自动瞎设置定位、大小
在这里插入图片描述

1、a-select组件加上:getPopupContainer="(triggerNode) =>triggerNode.parentNode"

在这里插入图片描述

2、style中使用:deep配合!important设置属性

在这里插入图片描述

Vue下拉选择框选中无响应问题的解决方法
2301_79326857的博客
09-26 1849
确保数据属性正确更新，选项的value属性正确设置，以及change事件正确绑定。通过以上的解决方法，你应该能够解决Vue下拉选择框选中无响应的问题，并顺利运行你的程序。选项值没有设置正确的value属性：在下拉选择框中，每个选项都应该设置一个value属性，用于标识该选项的值。如果选项值没有设置正确的value属性，那么选择该选项时就无法正确地更新绑定的数据属性。绑定的数据没有正确更新：在Vue中，我们通常使用v-model指令将下拉选择框与一个数据属性进行双向绑定。请确保你的数据属性是正确更新的。
Ant design Vue 中的 a-select 组件自定义下拉框
最新发布
weixin_39293433的博客
02-28 847
Ant-design-vue使用select下拉选的时候想对下拉框的内容扩展，官网文档提示使用对下拉菜单进行自由扩展。之前一直在使用ElmentPlus 对于ant的组件不是很熟悉，就做了一些尝试，如下是做了一个简单的表单。基本上完成自己想要的效果。
antd dropdown样式调整问题
热门推荐
weixin_44080648的博客
07-24 1万+
antd dropdown样式调整问题 客户给的设计图中有针对select dropdown的样式要求，包括背景色、字体颜色、选中时颜色等等等。。 虽然通过F12中元素选择器确定了dropdown的css，直接在Chrome的DevTools中进行设置也可以产生效果，但是呢，在代码中进行设置后却不生效。。。那我这个前端新手小白就懵逼了呀。。 最后！！！请教小姐姐后，发现是项目最外层的总体样式中有针对此进行样式设置，因此覆盖了我新写的css样式。为了不改变总体样式，可在Select选择框中加一个dr
antd-select组件样式，option下拉选中勾选样式，下拉箭头位置，使用Drawer样式失效
jyl919221lc的博客
03-07 1376
当你设置了 getContainer={false}，Drawer 将直接渲染在其父组件内，而不是作为 body 的直接子元素。getContainer 属性决定了 Drawer 渲染的 HTML 节点位置，默认情况下，Drawer 会被渲染到 body 元素上。这样做的好处是避免了 Drawer 内容的样式受到外部容器样式的影响。的问题，尤其是当 Drawer 包含诸如下拉菜单这样需要==“溢出”==（overflow）的子组件时。组件时，在less写法中修改下拉样式。注意：如果在使用抽屉。
ant-design-vue 设置 dropdownClassName 无效问题
Lxb_Thunder的博客
11-29 1808
后来发现 style-select-drowdown 根本不在那个组件下面，也就是组件在 app 下，下拉框和 app 同级，所以 deep 就无效，根本不是穿透的问题。由于设置了 scoped，所以一开始认为加个 :deep 应该可以，但是试了发现也没用。最后换成 global 的就成功修改样式了。发现是成功插入 class 的。
vue2 ant-design select组件自定义下拉框， dropdownRender 使用，以及遇到的坑
weixin_43978501的博客
07-15 2161
业务需求：下拉框需要满足用户可输入筛选 和 点击右侧 字符按钮 #A-Z进行用户选择。就是在同一个页面，渲染同一个组件时，在点击前一个组件后，后面的组件右侧按钮滚动失效。2、script中的代码。4、遇到的坑是什么呢？
antdesign of vue关于a-select下拉框选择不生效问题
DENGHANJIE123的博客
09-02 7161
antdesign of vue关于a-select下拉框选择不生效问题
antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1444
antd-react 组件库工作以来的总结
vue3 antd Tree控件异步数据加载，对树增删改更新整个树的数据时，会导致节点的展开按钮消失，节点再也无法展开
weixin_45440916的博客
03-20 2252
Tree控件异步数据加载，对树增删改更新整个树的数据时，会导致节点的展开按钮消失，节点再也无法展开，tree提供的loadData属性，可添加loadedKeys属性，这样可将加载的节点装入其中，在编辑或添加等操作之后也不会出现节点消失的情况。原本为多层树形结构，选择某级进行编辑或者添加后重新调用getOneNode()函数进行刷新，一级节点展开按钮消失，再点也无反应。由于只是绑定loadedKeys，但是一直为[]，点击叶子节点时会导致onLoad方法一直调用，从而进入死循环。
如何解决 iframe 无法触发 clickOutside
tzllxya的博客
06-23 3318
如何解决 iframe 无法触发 clickOutside 前言 在公司的一次小组分享会上，组长给我们分享了一个他在项目中遇到的一个问题。在一个嵌入 iframe 的系统中，当我们点击按钮展开 Dropdown 展开后，再去点击 iframe 发现无法触发 Dropdown 的 clickOutside 事件，导致 Dropdown 无法关闭。 查看在线示例 为什么无法触发 clic...
antd vue select 下拉菜单不和选择器同宽
weixin_45346457的博客
02-05 4677
<a-select class="subscribe-select" dropdownClassName="drop-down-Style" // 下拉菜单的 className 属性 :dropdownMatchSelectWidth="false" // 下拉菜单不和选择器同宽 :value="userId" @change="handleUserChange" :defau..
antd a-select下拉框样式修改 vue3 亲测有效
qq_54548545的博客
07-09 1331
antd a-select下拉框样式修改 vue3 亲测有效
AntdesignVue table设置行背景色不生效解决
朝花夕拾的博客
07-26 921
【代码】AntdesignVue table设置行背景色不生效解决。
ant-design-vue。下拉框a-select设置样式不显示的
MR_Shi_it的博客
11-30 1489
刚开始尝试了很多种方式，例如，deep..啦，还有官方自带的dropdownStyle属性，最离谱还看见一个文章 再index.html文件中设置样式，但是这样可以设置成功，但我相信，一个稍微资深一点的vue开发者都不想再index.html中设置样式，包括后期管理起来不方便什么的...。只有在 value = undefined 才会显示，对于其它的 null、0、'' 等等对于 JS 语言都是有意义的值。这个属性还有一点好处，就是如果下拉框有的时候点击或者滚动页面的时候，下拉框也会跟着滚动。
ant中select-dropdown遮盖选择框及定位问题
lowers_1的博客
08-15 4406
ant中select-dropdown遮盖选择框及定位问题
修改组件样式不生效（vue深度选择器）
xccevol的博客
06-11 564
💡 这样会污染全局的样式，一般组件会给你提供一个属性，给弹窗加一个类。样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用。/deep/ 这种写法不支持sass预处理器，也不推荐使用。>>> 这种写法在浏览器兼容性问题，所以一般也不推荐使用。文件里面更改不生效，需要在全局样式里面更改才生效。有些像 Sass 之类的预处理器无法正确解析。::v-deep vue3弃用，也不推荐使用。没有选中，可以使用vue提供的深度选择器。深度选择器还有以下几种写法。
Dropdown 下拉菜单中点击事件失效 el-dropdown-item 内的 @click点击无效
AmbroseLe
04-06 2213
第一种就是把@click 改为 @click.native 如果不行的话就使用指令@command 写法 <el-dropdown trigger="click" @command="handleCommand" placement="bottom-end" style="margin-left: 10px" > <spa.
antd Select组件 和 Dropdown组件 踩坑·记
青蛙king的博客
03-16 6104
1、Select组件，展开下拉框后，滑动滚轮，下拉框会跟着上下滑动 解决： <Select getPopupContainer={trigger => trigger.parentNode} > 2、Select组件，上下滑动下拉框里的数据，数据自动变了 解决： ...
页面缩放antd的下拉菜单和按钮会错位
11-23
当使用Ant Design库中的下拉菜单（Dropdown）和按钮（Button）组件，并且在页面缩放（如浏览器窗口大小调整或通过CSS媒体查询设置响应式设计）时，如果它们没有适配好，可能会出现错位的情况。这是因为这些组件默认的布局可能没有考虑到视口尺寸的变化。 解决这个问题通常需要对组件的样式进行一些调整，比如添加`@media`查询来针对不同的屏幕尺寸应用特定的CSS样式规则。你可以尝试以下几个步骤： 1. **检查CSS**: 检查与下拉菜单和按钮相关的CSS选择器，特别是那些可能影响位置、大小或浮动的属性，如`position`, `width`, 和`float`等。 2. **设置固定宽度**：考虑将下拉菜单或按钮的宽度设置为百分比值，而不是固定像素值，这样它们可以根据视口大小自适应。 3. **响应式布局**：为小屏幕设备提供专门的样式，例如使用栅格系统或Flexbox来调整元素的排列和尺寸。 4. **使用`rc-trigger`组件**：对于Dropdown，确保你在使用时正确地包裹了`<rc-trigger>`组件，这可以帮助处理触发行为和位置。 5. **动态调整**：如果可能的话，使用JavaScript监听视口变化，并根据新的尺寸更新组件的位置。 ```css /* 示例 CSS */ .ant-dropdown { @media (max-width: 768px) { width: 80%; /* 或者其他适合的小屏尺寸 */ } } @media (min-width: 768px) { .your-button { // 根据大屏幕尺寸调整样式 } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值