elementui 同时打开两个el-dialog

可以通过在 `el-dialog` 组件上添加 `v-if` 条件来实现同时打开两个 `el-dialog` 对话框，例如：

<el-dialog :visible.sync="dialogVisible1">
  // 内容
</el-dialog>

<el-dialog :visible.sync="dialogVisible2" v-if="dialogVisible1 === false">
  // 内容
</el-dialog>

这样就可以在打开第一个对话框时，第二个对话框处于关闭状态。关闭第一个对话框后，第二个对话框才会出现。同时打开两个对话框时，需要将第二个对话框的 `v-if` 条件设置为第一个对话框的状态。

相关问题

elementUI 的el-dialog作为子组件，父组件如何控制其关闭的按钮

在 ElementUI 的 el-dialog 组件中，关闭按钮可以通过 `close-on-click-modal` 和 `close-on-press-escape` 这两个属性来控制是否开启点击模态框和按下 ESC 键时关闭对话框的功能。

如果需要在父组件中控制关闭对话框的按钮，可以在父组件中使用 `ref` 获取到 el-dialog 组件的实例，然后通过调用实例的 `close()` 方法来关闭对话框，例如：

<template>
  <div>
    <el-button @click="showDialog">打开对话框</el-button>
    <el-dialog ref="dialog" :visible.sync="dialogVisible" title="对话框标题">
      <!-- 对话框内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    closeDialog() {
      this.$refs.dialog.close()
    }
  }
}
</script>

在上面的示例中，通过 `ref="dialog"` 给 el-dialog 组件起了一个名字，然后可以在 `closeDialog()` 方法中通过 `this.$refs.dialog` 获取到 el-dialog 组件的实例，进而调用 `close()` 方法来关闭对话框。

el-dialog 设置标头

在使用el-dialog组件时，可以通过在title属性里使用插槽的方式来设置多个不同样式的字符串。具体做法是在title属性的值前面加上`<template>`标签，并在内部使用`<span>`等标签来包裹需要设置不同样式的字符串。例如：

<el-dialog :title="`<template><span style='color: red;'>Hello</span> <span style='color: blue;'>World</span></template>`">
  <!-- 对话框内容 -->
</el-dialog>

这样就可以在el-dialog的标题中设置两个不同样式的字符串，分别为"Hello"和"World"，其中"Hello"的颜色为红色，"World"的颜色为蓝色。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [通过具名 slot (插槽) 来显示Dialog 的标题](https://blog.csdn.net/qyl_0316/article/details/107967547)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [elementui dialog弹框带虚线拖拽](https://blog.csdn.net/m0_71818580/article/details/128260770)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [element ui 对话框el-dialog关闭事件详解](https://download.csdn.net/download/weixin_38660108/12763272)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]