没问题，这个需求挺常见的，我来给你一步步讲清楚怎么实现——核心思路是隐藏默认的右上角关闭按钮，通过自定义对话框的header插槽来添加左上角按钮，同时兼容原有的关闭前确认逻辑。

步骤拆解 #

• 隐藏默认关闭按钮：给el-dialog添加show-close="false"属性，去掉右上角的默认按钮。
• 自定义Header区域：利用Element UI的slot="header"插槽完全接管对话框头部，把自定义关闭按钮放在左上角，同时保留标题。
• 绑定关闭逻辑：给自定义按钮添加点击事件，兼容原有的before-close确认逻辑，确保关闭流程和默认按钮一致。

完整示例代码 #

模板部分 #

<el-dialog 
  :visible.sync="dialogVisible" 
  width="30%" 
  :before-close="handleClose"
  show-close="false" <!-- 隐藏默认右上角关闭按钮 -->
>
  <!-- 自定义Header插槽，完全控制头部布局 -->
  <template slot="header">
    <div class="custom-dialog-header">
      <!-- 自定义左上角关闭按钮 -->
      <el-button 
        icon="el-icon-close" 
        type="text" 
        @click="handleCustomClose"
        size="small"
      >
      </el-button>
      <!-- 对话框标题 -->
      <span>Tips</span>
    </div>
  </template>

  <span>这里是对话框内容区域</span>
</el-dialog>

脚本部分 #

export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    // 原有的关闭前确认钩子
    handleClose(done) {
      this.$confirm('确定要关闭这个对话框吗？')
        .then(() => {
          done(); // 用户确认后执行关闭
        })
        .catch(() => {
          // 用户取消关闭，不执行任何操作
        });
    },
    // 自定义关闭按钮的点击事件
    handleCustomClose() {
      // 调用关闭前确认逻辑，传入done函数控制最终是否关闭
      this.handleClose(() => {
        this.dialogVisible = false;
      });
    }
  }
};

样式部分（可选，调整布局） #

.custom-dialog-header {
  display: flex;
  align-items: center;
  gap: 10px; /* 按钮和标题的间距 */
}

关键说明 #

• 插槽的灵活性：slot="header"让我们完全掌控头部的布局，你可以根据需求调整按钮的样式、位置，甚至添加其他元素。
• 兼容before-close：如果需要关闭前的确认逻辑，一定要在自定义按钮的点击事件里调用原有的handleClose方法，并传入done函数，这样能保证关闭流程和默认按钮完全一致。
• 样式自定义：通过flex布局可以轻松调整按钮和标题的位置，比如想让标题居中，只需要给.custom-dialog-header加上justify-content: center即可，完全按需调整。

内容的提问来源于stack exchange，提问作者Noa