问题描述
同时弹出消息弹框和对话框时，消息弹框被对话框遮挡
问题原因
element UI默认给$message消息弹框动态添加的z-index值比对话框小
解决方案
给 $message 添加自定义样式
this.$message({ message: "我是消息", customClass: "myMessageClass" });
划重点：必须是全局style，不能有scoped
<style > /* 必须是全局style，不能有scoped */ .myMessageClass { z-index: 3000 !important; } </style>
完整代码范例
<template> <div> <el-button @click="notice" type="primary">同时弹出消息和对话框</el-button> </div> </template> <script> export default { methods: { notice() { this.$message({ message: "我是消息", customClass: "myMessageClass" }); this.$alert("我是对话框", "对话框"); }, }, }; </script> <style > /* 必须是全局style，不能有scoped */ .myMessageClass { z-index: 3000 !important; } </style>
