el-dialog标题居左

要将 Element UI 的 el-dialog 组件的标题居左，可以通过设置其 slot 的样式来实现。

首先，在 el-dialog 组件中加入一个名为 `title` 的 slot，并在其中放置标题内容：

<el-dialog>
  <template slot="title">
    <div class="dialog-title">对话框标题</div>
  </template>
  <!-- 其他内容 -->
</el-dialog>

然后，在样式中为 `.dialog-title` 添加样式：

.dialog-title {
  text-align: left;
}

这样就可以将 el-dialog 的标题居左了。

相关问题

el-dialog标题居中

el-dialog标题居中可以通过修改样式来实现。你可以在el-dialog组件外部添加一个样式块，使用flex布局将标题居中显示。以下是一个示例代码：

<template>
  <el-dialog :title="dialogTitle" v-model="dialogShow" width="900px">
    <!-- 对话框内容 -->
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog .el-dialog__header {
  display: flex;
  justify-content: center;
}
</style>

在上面的代码中，我们使用了flex布局，并将标题的容器元素的`justify-content`属性设置为`center`，这样就可以将标题居中显示了。

el-dialog 标题加下划线

对于 el-dialog 组件，可以通过自定义样式来实现标题加下划线的效果。你可以使用以下步骤来实现：

1. 首先，在使用 el-dialog 组件的地方，给 el-dialog 添加一个自定义 class，例如 "dialog-with-underline"。

2. 然后，在你的样式文件（通常是一个 CSS 或 SCSS 文件）中，为这个自定义 class 添加样式规则。你可以使用伪元素 ::after 来创建下划线效果。

例如，假设你的自定义 class 是 "dialog-with-underline"，则可以添加以下样式：

   .dialog-with-underline .el-dialog__header {
     position: relative;
   }

   .dialog-with-underline .el-dialog__header::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 1px;
     background-color: #000; /* 下划线的颜色 */
   }

3. 最后，在 el-dialog 组件中添加自定义 class "dialog-with-underline"。

例如：

   <el-dialog class="dialog-with-underline">
     <!-- 对话框的内容 -->
   </el-dialog>

这样就可以实现 el-dialog 标题加下划线的效果了。记得根据你的需求调整样式中的颜色、高度等属性。