解决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'

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

效果:

相关推荐
008爬虫实战录16 小时前
【码上爬】 题十二:如来神掌 困难, JSVMP加密,使用代理补环境
前端·javascript·node.js
008爬虫实战录16 小时前
【码上爬】 题十:魔改算法 堆栈分析,找加密值过程详解
前端·python·算法
无人装备硬件开发爱好者16 小时前
深度解析GPS天线设计:从贴片天线到LNA前端的完整硬件方案
前端
threelab17 小时前
Three.js 数学函数着色器 | 三维可视化 / AI 提示词
javascript·人工智能·着色器
卷帘依旧17 小时前
React Hook采用环形链表的原因
前端
lichenyang45317 小时前
从 HarmonyOS AI 聊天模块理解工程化架构:MVVM、Controller、Provider、请求封装与 SSE
前端
卷帘依旧17 小时前
为什么React Hooks不能用在if/for等条件/循环语句中
前端
ZC跨境爬虫18 小时前
跟着 MDN 学CSS day_3:(为一个传记页面添加样式)
前端·javascript·css·ui·音视频·html5
夜雪闻竹18 小时前
sql.js WASM 实战:浏览器里跑 SQLite
javascript·sql·wasm
jay神18 小时前
基于微信小程序课外创新实践学分认定系统
java·spring boot·小程序·vue·毕业设计