el-dialog自定义头部

你可以使用 `el-dialog` 组件的 `header` 插槽来自定义对话框的头部。以下是一个示例：

<template>
  <el-dialog
    title="自定义头部"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <template #header>
      <div class="custom-header">
        <!-- 在这里添加自定义的头部内容 -->
        <h3>自定义标题</h3>
        <button @click="closeDialog">关闭</button>
      </div>
    </template>
    <!-- 对话框的内容 -->
    <span>这是对话框的内容</span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    closeDialog() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped>
.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

在上面的示例中，我们通过使用 `#header` 插槽来定义自定义的头部。在插槽中，我们添加了一个包含自定义标题和关闭按钮的容器。你可以根据需求自由地修改和添加头部内容。