elementui el-dialog 动态生成多个，点击按钮打开对应的 dialog

在Vue中使用Element UI的el-dialog组件动态生成多个对话框，并且每个对话框通过点击不同的按钮打开，可以通过维护一个数据数组来动态创建对话框。以下是一个简单的示例：

<template>
  <div>
    <!-- 动态生成的对话框 -->
    <el-dialog
      v-for="(dialog, index) in dialogs"
      :key="index"
      :title="dialog.title"
      :visible.sync="dialog.visible">
      {{ dialog.content }}
    </el-dialog>
 
    <!-- 按钮用来打开对话框 -->
    <el-button
      v-for="(dialog, index) in dialogs"
      :key="index"
      @click="dialog.visible = true">
      Open Dialog {{ index + 1 }}
    </el-button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      // 对话框数组
      dialogs: [
        { title: 'Dialog 1', content: 'Content for Dialog 1', visible: false },
        { title: 'Dialog 2', content: 'Content for Dialog 2', visible: false },
        { title: 'Dialog 3', content: 'Content for Dialog 3', visible: false },
        // 可以根据需要继续添加更多对话框
      ]
    };
  }
};
</script>

在这个例子中，我们有一个dialogs数组，它包含了多个对话框的数据。每个对话框都有title、content和visible属性。visible属性是一个双向绑定的数据，用来控制对话框的显示与隐藏。

每个对话框都有一个按钮与之对应，通过点击按钮将对应的visible属性设置为true，从而打开对话框。使用v-for指令来创建这些对话框和按钮，并且保证每个对话框的visible属性是独立的，这样每个对话框就可以独立打开和关闭。