element-ui 的el-select展开位置

最新推荐文章于 2024-07-22 14:51:05 发布

peer__

最新推荐文章于 2024-07-22 14:51:05 发布

阅读量1.7k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/peer__/article/details/134420556

版权

文章讲述了在VueElementUI的el-select组件中遇到的展开位置偏移问题，通过设置`popper-append-to-body`属性和使用相对定位以及深度样式覆盖默认样式来解决。同时提到如何修改element.style以确保样式生效。

摘要由CSDN通过智能技术生成

问题1:el-select下拉框展开位置偏移

解决办法:在el-select里加上下面这个属性

:popper-append-to-body="false"

问题2:加上以上属性后,可能会导致下拉框向上展开

解决办法:包一个div,给该div加上相对定位属性,如下:

完美解决这个逆子朝上开的问题:

另:若需要修改element.style的样式,可以在css用深度样式修改,属性后面加上!import,否则修改无效,如下:

/deep/.el-select-dropdown{
  //top: 0 !important;
}

这样默认样式会被自定义样式替代

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

peer__

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
element-ui 的el-select展开位置

el-select位置偏移 el-select下拉框朝上展开
复制链接

扫一扫

element Select 选择器下拉框位置跑了

m0_46115011的博客

02-19

2678

第一种：使用 popper-class 属性注意：style中需要去掉 scoped！！！否则无效第二种：可以用:popper-append-to-body="false"属性+ Css/deep/ el-select-dropdown /deep/ .el-select-dropdown { width: 100% !important; border: 2px solid #6db8f9; background: #06284b; } 注意： ...

Element-ui中el-select默认展开设置

weixin_50301714的博客

11-24

1995

Element-ui中el-select默认展开设置，全网解释的比较清楚的，提供给大家使用的思路

参与评论您还未登录，请先登录后发表或查看评论

修改el-select下拉框位置

weixin_45832746的博客

11-10

926

【代码】修改el-select下拉框位置。

今日分享——elementUI时间选择器下拉框错位，跑到左上角问题解决方案。

2201_75842578的博客

07-12

274

项目中涉及多个表格切换打印功能，两个表格互相切换导致渲染不同的日期选择器，使用的是v-if进行控制渲染。切换到第二个表格是下拉选择器就出现位置错位。因为vue的渲染机制复用DOM导致，解决也很简单只需要给两个选择器各添加一个唯一的key值。key值可以让vue更好的追踪组建的状态和位置。

elementUI——select组件下拉弹窗位置问题——css样式问题

yehaocheng520的博客

10-27

4771

今天，测试提了一个bug给我，页面如下：发起EQ弹窗中的问题是一个

element ui select 自动向上向下弹出_小程序自动化测试之python版

weixin_39709262的博客

11-25

1177

01介绍minium是微信官方提供的自动化测试框架，支持Python和JavaScript两种语言。根据官方文档介绍，它的特点如下：·支持一套脚本，iOS & Android & 模拟器，三端运行·提供丰富的页面跳转方式，看不到也能去得到·可以获取和设置小程序页面数据，让测试不止点点点·可以直接触发小程序元素绑定事件·支持往 AppSerive 注入代码片段执行·可以调用...

自己做一个select，点击，展示下拉框；如果下面区域不够，就在上面展示

weixin_46601685的博客

10-20

731

经常会遇到滚动+select组合，如果页面可以滚动，且select距离下面的地方不够了，select就会撑起一定的高度。好多时候，antDesign或者element ui的select的样式不满足需求。所以就制定方案，如果不够用了，就在上面展示。但是如果改样式，耗费时间很长。

element-ui 之Select 选择器,下拉框城市

weixin_57246351的博客

09-21

2770

第一步:先建一个组件文件citys.vue <template> <div class="app-container"> <el-form label-width="100px"> <el-form-item label="城市" style="width:400px"> <el-select style="width: 48%; margin-right: 4%" v-mo

element-plus修改el-select下拉框的位置

qq_43651168的博客

05-16

4097

element-plus修改el-select下拉框位置

处理 el-select 下拉列表产生位置不准确，打开下拉列表后滚动页面列表会异常偏移的问题

最新发布

m0_52211521的博客

07-22

368

我就对比了一下element-ui官网针对vue2/vue3的el-select参数描述发现，针对vue3实行的下拉框参数中并不沿用popper-append-to-body字段来控制是否将组件加入body，而是用teleported控制，于是尝试加了:teleported="false"，结果发现成功了。结论：在el-select标签内加入:popper-append-to-body="false"或者:teleported="false"即可解决。

elementUI select popper弹出方向

xiazzww的博客

02-06

1814

elementui select popper

Vue + Element-ui的下拉框el-select获取额外参数详解

10-14

在Vue.js框架中，Element-ui库提供了一套丰富的UI组件，其中包括用于创建下拉框的`el-select`组件。在实际开发中，我们可能需要在用户改变选择时获取额外的信息，比如当前行的数据或者自定义的属性。本文将详细介绍...

element-ui 远程搜索组件el-select在项目中组件化的实现代码

10-15

Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...

详解element-ui中el-select的默认选择项问题

10-16

在Element-UI，一个流行的Vue.js组件库中，`el-select`组件被广泛用于实现下拉选择功能。本文将深入探讨`el-select`组件在设置默认选择项时可能遇到的问题及解决方案。首先，`el-select`是Element-UI提供的一个...

vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)

10-18

主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本

element-ui中的select下拉列表设置默认值方法

10-18

今天小编就为大家分享一篇element-ui中的select下拉列表设置默认值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

element Table组件下拉上拉效果实现

群峰之巅的博客

05-11

4741

2019-07-23更新经过一段时间的学习我发现了更为简单的方法，CSS的 transition属性指定对应的属性完成需要多久时间。因此我们定义了一个class .carton{ transition: height 5s; } 设置test的class = carton 并修改函数 showTable hiddenTable，并删除其他函数 showTabl...

el-select下拉框的问题

qq_38783557的博客

09-14

637

el-select下拉框问题

python autoit上传文件_自动化测试——之autoit上传文件

weixin_39628594的博客

12-10

548

使用autoit脚本上传方式：由于有的上传控件不是input元素，所以send_keys不可用。此时可以通过autoit来帮助我们实现上传功能，先了解下什么是autoit。它是一个使用类似BASIC脚本语言的免费软件,它设计用于WindowsGUI(图形用户界面)中进行自动化操作。它利用模拟键盘按键，鼠标移动和窗口/控件的组合来实现自动化任务。而这是其它语言不可能做到或无可靠方法实现的。很多版本，...

element-ui的el-select el-option写事件

06-04

element-ui中的el-select和el-option组件都支持一些事件，可以通过这些事件来实现对组件的交互操作。具体的事件如下： el-select组件支持以下事件： 1. change: 当选中值发生改变时触发； 2. visible-change: 下拉框出现/隐藏时触发； 3. remove-tag: 当多选模式下移除tag时触发； 4. clear: 当清空选项时触发。 el-option组件支持以下事件： 1. click: 当选项被点击时触发； 2. hover: 当鼠标悬停在选项上时触发。在使用这些事件时，可以在组件上使用@eventName="handler"的语法来绑定对应的事件处理函数。例如： ``` <el-select v-model="value" @change="handleChange"> <el-option label="选项1" value="1"></el-option> <el-option label="选项2" value="2"></el-option> </el-select> ``` 其中，handleChange就是对应的事件处理函数。