vue中一个组件多个el-dialog

在Vue中，一个组件只能渲染一个元素，因此不能直接在一个组件内渲染多个el-dialog。但是，可以通过使用多个组件来实现一个页面内多个弹窗的效果。

具体实现方法如下：

1. 创建一个弹窗组件，可以使用el-dialog组件或自定义组件。

2. 在需要使用弹窗的地方，引入弹窗组件，并通过v-if或v-show指令来控制弹窗的显示和隐藏。

例如，在父组件中引入弹窗组件：

<template>
  <div>
    <button @click="showDialog1 = true">打开弹窗1</button>
    <button @click="showDialog2 = true">打开弹窗2</button>
    
    <my-dialog v-if="showDialog1" :dialogTitle="dialogTitle1" @close="showDialog1 = false">
      弹窗1内容
    </my-dialog>
    
    <my-dialog v-if="showDialog2" :dialogTitle="dialogTitle2" @close="showDialog2 = false">
      弹窗2内容
    </my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue'

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      showDialog1: false,
      showDialog2: false,
      dialogTitle1: '弹窗1',
      dialogTitle2: '弹窗2'
    }
  }
}
</script>

在上面的代码中，通过v-if指令来控制弹窗的显示和隐藏，使用了自定义的弹窗组件MyDialog，并传递了相应的props和事件。

3. 在弹窗组件中，使用el-dialog组件或自定义组件来实现弹窗的显示和隐藏。

例如，在弹窗组件MyDialog中使用el-dialog组件：

<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="onClose">
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogTitle: String
  },
  data() {
    return {
      dialogVisible: true
    }
  },
  methods: {
    onClose() {
      this.$emit('close')
    }
  }
}
</script>

在上面的代码中，使用了el-dialog组件来实现弹窗的显示和隐藏，并通过props来接收弹窗的标题，并通过事件来实现弹窗的关闭操作。

通过以上步骤，就可以在一个页面中实现多个弹窗的效果了。