记一个Element-plus的ElMessageBox样式被遮挡问题

简介: 使用Element-plus开发时,发现ElMessageBox被El-Table遮挡

昨天在开发一个管理页面,功能有,编辑时只有一行可以编辑,删除时弹出警告窗口,确认后才执行删除。

代码为Element-plus中的示例。

但是ElmessageBox一直被<El-Table>遮挡,image.png猜测的可能原因为嵌套了两层<router-view>导致的<El-Table>的z-index太高,

<template><el-table:data="projectTableData"style="width: 100%"><el-table-columnprop="date"label="Date"><template#default="scope"><spanv-show="!scope.row.editing">{{ scope.row.date }}</span><el-inputv-show="scope.row.editing"v-model="scope.row.date"></el-input></template></el-table-column><el-table-columnprop="name"label="name"></el-table-column><el-table-columnprop="address"label="Address"/><el-table-columnlabel="Operate"><template#default="{ row, rowIndex }"><el-buttonv-if="row.editing"type="primary"link@click="handleSave(row)">保存</el-button><el-buttonv-elsetype="primary"link@click="handleEdit(row, rowIndex)">编辑</el-button><el-buttonv-if="row.editing"link@click="handleCancel(row)">取消</el-button><el-buttonv-elsetype="danger"link@click="handleDelete(row)">删除</el-button></template></el-table-column></el-table></template><scriptsetuplang="ts">import {
ElMessage,
ElMessageBox,
} from'element-plus';
import { ref } from'vue';
constprojectTableData=ref([
    {
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
editing: false, 
    },
    {
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
editing: false,
    },
    {
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
editing: false,
    },
    {
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
editing: false,
    },
]);
consthandleEdit= (row, rowIndex) => {
if (!row.editing) {
// 如果点击的行不是当前正在编辑的行projectTableData.value.forEach((item, index) => {
if (index!==rowIndex) {
item.editing=false; // 取消其他行的编辑状态            }
        });
row.editing=true;
    }
};
consthandleSave= (row) => {
row.editing=false;
// Handle Save logic};
consthandleDelete= (row) => {
console.log(row);
ElMessageBox.confirm(
'真的删除吗?删除之后数据无法找回',
        {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
appendTo:'body',
title:"警告",
        })
        .then(() => {
ElMessage({
type: 'success',
message: '删除成功'            })
        })
        .catch(() => {
ElMessage({
type: 'info',
message: 'Delete canceled',
            })
        })
// Handle Delete logic};
consthandleCancel= (row) => {
row.editing=false;
};
</script>

image.png

在开发者控制台元素中可以看到已经挂载到body了,最外层的div的z-index是2002,所以设置这个z-index更高就行了

.is-message-box{
position: relative;
z-index: 9000;
}

image.png

相关文章
|
7月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
285 1
|
7月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
64 3
|
16天前
CSS3几何透明层文本悬停变色源码
CSS3几何透明层文本悬停变色源码是一款基于css3 svg制作的背景图片鼠标悬停几何形状透明层变色显示文本内容
15 0
CSS3几何透明层文本悬停变色源码
|
3月前
|
前端开发
伪类中使用element图标
如何在CSS伪类中使用Element UI图标,以及伪类与伪元素在CSS3中的区别和应用。
37 1
伪类中使用element图标
|
2月前
|
前端开发 容器
CSS实现旋转圆角叠加样式,你学会了吗?
CSS实现旋转圆角叠加样式,你学会了吗?
39 0
|
4月前
|
前端开发
CSS——通过伪类来自定义四个角边框
CSS——通过伪类来自定义四个角边框
121 3
|
4月前
|
JavaScript 开发者
Element UI & Element Plus之改变表格单元格颜色
这篇文章展示了如何在Element UI和Element Plus框架中使用`:cell-style`属性来根据条件改变表格单元格的颜色。
428 0
Element UI & Element Plus之改变表格单元格颜色
|
5月前
Element UI 表格【列宽自适应】
Element UI 表格【列宽自适应】
131 0
|
5月前
|
JavaScript
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
文本,最简单的文本样式设计风格样式,让Element-UI盒子居中的写法
|
7月前
|
前端开发
CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
【5月更文挑战第31天】CSS属性涵盖了从文本样式到布局控制、从颜色处理到动画效果的各个方面
51 1