解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题

现象:

点击【作废】按钮后,弹出来的confirm层级被el-table覆盖

原因:

z-index虽然设置了,但没有生效

根本问题在于.el-overlay这个样式没有被设置,因为这个类是做了【position: fixed;】的设置的。

没有被设置的原因在于,我引入组件的方式是按需引入,需要单独引入这个样式文件

解决方案:
javascript 复制代码
import { ElMessageBox} from 'element-plus'
import 'element-plus/theme-chalk/src/message-box.scss'
import 'element-plus/theme-chalk/src/overlay.scss'

引入后就能生效了,可以看到元素里面有这个类的设置了

效果:

相关推荐
黄交大彭于晏1 天前
UniApp 全局通知功能实现
前端·vue.js·uni-app
sTone873751 天前
Android核心概念(一)minSdkVersion targetSdkVersion compileSdkVersion
android·前端
林太白1 天前
八大数据结构
前端·后端·算法
一 乐1 天前
流浪动物救助|流浪猫狗救助|基于Springboot+vue的流浪猫狗救助平台设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设
火星数据-Tina1 天前
Python + WebSocket 实现实时体育比分系统(含数据库设计与前端演示)
开发语言·前端
国思RDIF框架1 天前
国思RDIF低代码快速开发框架 v6.2.2版本发布
前端·vue.js·后端
oil欧哟1 天前
Agent 设计与上下文工程- 02 Workflow 设计模式(上)
前端·网络·人工智能
StarkCoder1 天前
GetX 状态管理优化:从 GetBuilder 到 Obx 的性能提升实践
前端
小高0071 天前
深入理解 package.json:前端项目的 "身份证"
前端·javascript·vue.js
StarkCoder1 天前
Flutter ListView 数据变动导致的卡顿与跳动问题:Key 的妙用
前端