修改el-dialog标题及内容样式

原创已于 2024-02-28 16:11:04 修改 · 3.6k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript #vue #前端

于 2024-01-20 17:51:14 首次发布

本文讲述了如何解决El-dialog组件中标题区域无内容但头部仍占空间的问题，通过在外部嵌套div并使用样式穿透或调整最外层样式来实现，同时处理了关闭按钮的显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：当前el-dialog标题无内容，但是header仍然存在（头部显示占据一部分空白），同时需要去除内容部分的padding。

已尝试的无效方法：

通过样式穿透修改.el-dialog__header及.el-dialog__body
给el-dialog加上custom-class或class，再对内部元素进行修改

有效方法：

在el-dialog外部嵌套一层div元素，并对其设置类名，在该元素下对需要修改的.el-dialog__header及.el-dialog__body使用样式穿透或直接对最外层.el-dialog进行样式穿透（注：此处不使用样式穿透不生效）。

.dialog-wrapper {
  :deep(.el-dialog) {
    .el-dialog__header {
      padding: 0;
      button {
        z-index: 999;
        margin-right: 20px;
      }
    }
    .el-dialog__body {
      padding: 0;
    }
  }
}

此处还需注意去除header会导致关闭对话框的按钮无法显示，可以使用z-index进行修改。