element-plus下拉框和输入框宽度不一致，:popper-append-to-body=“false“失效

最新推荐文章于 2024-06-06 14:18:20 发布
最新推荐文章于 2024-06-06 14:18:20 发布
阅读量719 收藏
点赞数 4
分类专栏： vue vue3 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Liberty_yes/article/details/136938304
版权
vue 同时被 2 个专栏收录
27 篇文章 3 订阅
订阅专栏
vue3
8 篇文章 0 订阅
订阅专栏
  1. 遇到的问题：我修改了el-select输入框的宽度之后，发现下拉选项和输入框的宽度不一样了!

在这里插入图片描述
2. 原因控制台看到下拉项的DOM元素时插入到body里面了，使用:popper-append-to-body="false"发现已经废弃，最后发现替换成:teleported="false"
teleported：是否将 popover 的下拉列表插入至 body 元素 默认值为true，把这个属性改为false，成功了！！！
在这里插入图片描述
此时，下拉项的DOM元素会被插入到el-select下
在这里插入图片描述

Liberty_yes
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解如何修改el-select的样式：popper-append-to-body和popper-class
11-21
如何修改elementUI提供的el-select组件的样式 网上有很多关于这个的解决方式： 1、找到下拉框的类名，写个全局样式覆盖掉就行了 2、修改.el-select-dropdown__item的样式 3、通过官网提供的popper-class进行样式修改 然而，上面的方法并没有说到点子上，覆盖全局样式的方法肯定不友好，修改样式和添加类也都不起作用。于是，我看了下下拉框的样式，它并没有在el-select里面，而是放在了最外层，如下图： 然后就去官网看了下是否有属性可以控制它，果然有这么一号人物popper-append-to-body： 默认是true，改成false就可以起作用
Element 动态tab中下拉框定位 popper-append-to-body使用后弹出框看不到
weixin_38923162的博客
03-15 2176
popper-append-to-body： 是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false。开发时在使用动态tab增加行时添加的下拉框、时间框增加该属性后弹出框看不到了，分析发现是因为行高度不够导致内容自动隐藏。解决方法是重新编写css。
el-dialog append-to-body=false时遮罩层无法遮盖父级同级组件
最新发布
qq_43615959的博客
06-06 430
解决el-dialog append-to-body=false、modal-append-to-body=false时遮罩层无法遮盖父级同级组件的问题
el-select如何改变样式 （:popper-append-to-body=“false“）
Alone_Endeavor的博客
06-01 6639
popper-append-to-body是一个Popper.js库的选项，用于指定Popper元素是否应该附加到文档的body元素上。通过Element-ui的Select Attributes可发现，有这样一个属性 popper-append-to-body。在使用el-select的时候，其样式会按照Elementui自带的默认样式为基准；.el-select-dropdown__item:hover——hover时的样式。.el-select-dropdown__item——单个选项的样式修改。
element select 下拉菜单 定位出错解决方案
CooolYvonne的博客
10-19 5992
框架：Vue+Element 问题： 当点击select，弹出popper后，再滚动外层容器区域，popper的scroll监听会不停的变动popper的位置。这是正常现象。 但是，由于我们的DOM结构嵌套太多，布局太复杂。出现了一个特别的现象： popper没有正常的跟随select的位置变化定位。 如果发生这种情况，比较好处理的是直接可以加一下select 的 popper-append-to-body 属性 并设置为false值（whether to append the popper menu t
【vue】el-select控件避免修改全局样式用属性popper-append-to-body
王佑辉的博客
06-29 4300
1.问题说明 1.默认el-select的popper-append-to-body属性是true,打开的el-select的气泡会追加到body中，导致局部样式无法修改 2.修改popper-append-to-body为true，气泡会追加到el-select控件上去，这样在el-select上加class属性便可以修改局部样式 ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
狮子座的男孩
05-05 9838
1、存在修改默认样式不生效问题的展示： A、问题一：虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示： B、问题二：渲染后的 dom 元素并不在 #app 元素内部： // 发现：修改下拉框默认属性而渲染的 dom 元素是与 #app 并列位于 body 中的，因此是没有办法通过深度选择器来定位该元素的； 2、用(深度)选择器设置属性不生效的原因： A、原因一：select-popper 元素渲染后会脱离 #app; 发现渲染后的 dom 元素不在 #app 元素内部, 应该是 el-selec
el-select样式两种修改方式index.html或popper-append-to-body加popper-class
weixin_45634433的博客
07-21 3284
el-select样式两种修改方式index.html或popper-append-to-body加popper-class 记录一下,博主整理的很是明朗,在此记录一下,方便以后查找,感谢博主的输出, 问题描述 饿了么UI自带的样式有一般也够用，不过有时候我们需要修改一下样式使其更加美观，本文记录一下修改el-select的样式的方式，记录一下，忘了的时候回来看看 问题分析 下拉框可以分为两部分，一部分是‘框’部分，另外一部分是‘下拉’部分，平常我们修改下拉框样式，无外乎就是修改这两个部分，如下图所示 修
使用Element-plus时，控制台报错popper-append-to-body is about to be deprecated in version 2.3.0
qq_43730272的博客
11-06 1307
组件中的 “popper-append-to-body” 属性在 2.3.0 版本中被弃用。
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...
element-ui中dialog弹窗关闭按钮失效的解决
10-14
主要介绍了element-ui中dialog弹窗关闭按钮失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
el-select 下拉框多选实现全选的实现
10-16
主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【vue elementUI】el-select和弹出框el-option样式调整，::v-deep失效
weixin_41747256的博客
03-18 1250
el-select和弹出框el-option样式调整，::v-deep失效
vue-element-ui的各种弹出框样式修改
m0_53397360的博客
03-01 3476
vue-element-ui的弹出框与#app同级，以下为各种弹出框样式修改方式： 1、组件中存在popper-append-to-body属性 2、使用popper-class属性修改弹出框样式 3、组件不存在popper-append-to-body属性和popper-class属性（例如el-table中的筛选弹出框），或不想影响全局样式
解决 /deep/ .el-select-dropdown{ }样式不生效的问题
night43的博客
04-15 4990
修改el-select样式时，发现 /deep/ .class名{background:#00f !important;}不生效的问题...
element中在长页面滚动时，下拉弹框没有跟随移动的问题
qq_37236241的博客
08-04 5796
具体问题如图： el-dropdown el-select 网上常规解决办法： el-select解决办法 :popper-append-to-body=“falsel-d el-dropdown解决办法 没有找到 我的解决办法（参考:element-ui/src/util/popper.js）: 弹出框随着滚动条移动的原理是通过监听window resize；而页面的弹出框是挂在了body下，所以滚动条要在最外层设置overflow:auto；其他层尽量不要设...
elementUI下拉选项加多选框功能实现（自己添加“全部”选项）
热门推荐
m0_67841039的博客
10-12 1万+
element-ui下拉多选框，添加全部选项
关于element ui select，date-picker添加:popper-append-to-body=“false“后，下拉框下拉方向不会自动调整的问题
weixin_46543056的博客
07-13 2875
关于element ui select，date-picker添加:popper-append-to-body="false"后，下拉框下拉方向不会自动调整的问题
关于el-Input框和el-select宽度不统一的设置
qq_37041798的博客
09-23 6250
elementUI:关于el-Input框和el-select宽度不统一的设置 给el-select增加style=“width:100%” ，即可以处理
vue3使用element-plus下拉框添加图标
06-10
要在element-plus的下拉框中添加图标，可以使用下拉选项的slot来实现。 首先，在下拉选项中添加一个图标元素，可以使用element-plus提供的Icon组件，也可以使用其他的图标库。 例如，我们在下拉选项中添加一个名称为"apple"的图标，代码如下： ``` <el-select v-model="fruit"> <el-option v-for="item in fruits" :key="item.value" :label="item.label" :value="item.value"> <el-icon :class="'icon-' + item.value" slot="prefix"></el-icon> </el-option> </el-select> ``` 其中，fruits是一个数组，每个元素包含一个label和一个value，表示下拉选项的显示文本和值。 在el-icon组件中，使用:class绑定一个动态的class，这个class是根据下拉选项的value属性动态生成的，例如当value为"apple"时，class为"icon-apple"。 最后，在el-option组件中使用slot="prefix"来指定图标显示在选项的前面。 这样就可以在element-plus的下拉框中添加图标了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值