【elementUI样式】模态框中的el-select下拉框不跟随页面滚动问题

news/2024/11/17 1:45:21/

文章目录

    • 1.在el-select标签中设置:popper-append-to-body="false"
    • 2.样式穿透(比较普遍的写法)

模态框中的el-select下拉框不跟随页面滚动问题
在使用elementUI写界面的时候,偶然遇到了如下图所示bug 在这里插入图片描述
当页面滚动的时候,el-select的内容跟随页面移动,不是跟随el-select下面的input进行移动,想要实现的效果如下图

在这里插入图片描述
百度了一下,有如下解决方案

1.在el-select标签中设置:popper-append-to-body=“false”

popper-append-to-body属性的作用:

popper-append-to-body 属性是 Element-ui 官方文档中提供的一个属性,该属性的用途: 就是将 el-select 选项的内容移动 div#app 当中,默认值是 true ;(详情可见elementUI的官网)

 <el-select v-model="returnformValue" placeholder="Please select your return reason":popper-append-to-body="false" style="z-index:1"class="returformSelect"><el-option v-for="item in returnform" :key="item.value":label="item.label" :value="item.value"></el-option></el-select>

2.样式穿透(比较普遍的写法)

 <el-dialog title="Please select your return reason":visible.sync="dialogFormVisible"><el-select v-model="returnformValue" placeholder="Please select your return reason":popper-append-to-body="false" style="z-index:1"class="returformSelect"><el-option v-for="item in returnform" :key="item.value":label="item.label" :value="item.value"></el-option></el-select><div slot="footer" class="dialog-footer"><el-button @click="ordernumCancel">cancel</el-button><el-button type="primary" @click="refundSubmit(scope.$index)">determine</el-button></div></el-dialog>

外层嵌套了模态框,发现:popper-append-to-body=“false” 不起作用,于是想到样式穿透

.returformSelect .el-select-dropdown {position: absolute !important;left: 0 !important;top: 40px !important;}

!important 为所有样式的最高级,可以通过外联的样式来个更改el-select本身自带的样式
其他的css样式选择器,可见css样式选择器


http://www.ppmy.cn/news/22.html

相关文章

Mybatis:快速搭建Mybatis(2)

快速搭建Mybatis搭建Mybatis目录框架步骤一&#xff1a;创建Maven工程步骤二&#xff1a;创建mybatis的核心配置文件步骤三&#xff1a;创建mapper接口步骤四&#xff1a;创建Mybatis的映射文件步骤四&#xff1a;通过junit测试增删改查功能步骤五&#xff1a;加入logback日志功…

[附源码]Python计算机毕业设计Django大学生考勤管理系统论文

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

网络面试-0x12 UDP和TCP的区别以及应用场景

一、 UDP &#xff08;user datagram protocol&#xff09;用户数据报协议 ①&#xff1a; 一种简单的面向数据报的通讯协议&#xff0c;即&#xff1a;应用层传下来的报文&#xff0c;不合并&#xff0c;不拆分&#xff0c;只是在其上面加上首部后就交给了下面的网络层。无论应…

b站黑马JavaScript的Ajax案例代码——聊天机器人案例

目录 目标效果&#xff1a; 更换的新接口&#xff1a; 1.机器人智能回复接口&#xff1a;http://www.liulongbin.top:3006/api/robot 2.机器人语音接口&#xff1a;http://www.liulongbin.top:3006/api/synthesize 重点原理&#xff1a; 1.jQuery中trim方法 2.jquery中a…

React.useCallback(function,array)使用,React中的函数组件和类组件的取值(快照or最新值)

目录 React.useCallback(function,array) React.memo 示例1 示例2 React中的函数组件和类组件的取值&#xff08;快照or最新值&#xff09; 闭包例子 修改React例子 React.useCallback(function,array) 返回一个函数&#xff0c;只有在array中的依赖项变化的时候才会更…

html实现ezuikit.js萤石云直播监控,ezuikit.js实时监控实现,萤石云实时监控简单实现

效果图 实现 下面的播放url获取&#xff1a;登录萤石云->控制台->我的资源->设备列表->列表中&#xff1a;查看通道->监控地址 appKey和appSecret获取&#xff1a;登录萤石云->控制台->我的账号->应用信息->右侧&#xff1a;应用密钥 下载ezuikit…

外卖项目(项目优化3)12---前后端分离开发

目录 问题描述&#xff1a;184 一、前后端分离开发 185 1.1介绍 185 1.2开发流程 1.3前端技术栈 二、YAPI 186 2.1介绍 2.2使用方式 三、Swagger 187 3.1介绍 3.2使用方式&#xff08;步骤&#xff09; 3.3Swagger---常用注解 188 四、项目部署 189 4.1部署架构…

美团面试应届生第二问:Volatile有什么作用?

文章目录volatile有什么作用&#xff1f;可见性证明指令重排证明不能保证原子性证明Volatile与Synchronized的区别volatile有什么作用&#xff1f; 保证线程的可见性禁止指令重排但是不能保证原子性 可见性证明 有如下静态成员变量num&#xff0c;初始值为0&#xff1b;有两…