记一个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

相关文章
|
8月前
|
编解码
element-ui 表格滚动条(不同分辨率)自适应问题;
element-ui 表格滚动条(不同分辨率)自适应问题;
347 1
|
前端开发
CSS新增样式----圆角边框、盒子阴影、文字阴影
CSS新增样式----圆角边框、盒子阴影、文字阴影
158 0
|
移动开发 前端开发 JavaScript
HTML - Canvas 使用画布旋转文本
HTML - Canvas 使用画布旋转文本
358 0
HTML - Canvas 使用画布旋转文本
|
4月前
|
前端开发
伪类中使用element图标
如何在CSS伪类中使用Element UI图标,以及伪类与伪元素在CSS3中的区别和应用。
47 1
伪类中使用element图标
|
7月前
|
移动开发 前端开发 JavaScript
HTML5 Canvas组件绘制太极图案
HTML5 Canvas组件绘制太极图案
37 0
|
前端开发
那些你不知道的 CSS 自定义形状网格布局 3(1)
那些你不知道的 CSS 自定义形状网格布局
95 0
那些你不知道的 CSS 自定义形状网格布局 3(1)
|
前端开发 容器
那些你不知道的 CSS 自定义形状网格布局2
那些你不知道的 CSS 自定义形状网格布局
86 0
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
328 0