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

<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>