elementui多个对话框出现相同的内容怎么解决

当多个对话框出现相同的内容时，这通常是因为你在使用 ElementUI 对话框组件时，使用了同一个数据源。解决这个问题的方法是使用不同的数据源。

具体来说，你可以为每个对话框组件创建一个独立的数据源，可以使用不同的变量名来避免冲突。例如：

<el-dialog :visible.sync="dialogVisible1">
  <p>{{ dialogContent1 }}</p>
</el-dialog>

<el-dialog :visible.sync="dialogVisible2">
  <p>{{ dialogContent2 }}</p>
</el-dialog>

...

data() {
  return {
    dialogVisible1: false,
    dialogVisible2: false,
    dialogContent1: 'Dialog 1 content',
    dialogContent2: 'Dialog 2 content',
    ...
  }
}

在这个示例中，我们为每个对话框组件创建了一个独立的数据源：`dialogContent1` 和 `dialogContent2`。这样，每个对话框组件将显示不同的内容，不会出现相同的内容。

相关问题

elementUI实现多个平行的Dialog

要实现多个平行的Dialog，你可以使用ElementUI的Dialog组件并在每个Dialog中设置不同的v-model属性，如下所示：

<template>
  <div>
    <el-button @click="showDialog1 = true">打开对话框1</el-button>
    <el-button @click="showDialog2 = true">打开对话框2</el-button>

    <el-dialog v-model="showDialog1">
      <!-- 对话框1的内容 -->
    </el-dialog>

    <el-dialog v-model="showDialog2">
      <!-- 对话框2的内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog1: false,
      showDialog2: false
    }
  }
}
</script>

这样就可以同时打开多个对话框了，每个对话框的状态都由不同的v-model属性控制。你可以根据需要设置多个Dialog组件来实现更多的对话框。

elementUI的this.$confirm添加多选框

elementUI的this.$confirm方法不支持直接添加多选框。根据提供的代码和引用中的示例，可以看到在确认对话框的内容部分，使用了h函数创建了一组p标签，但是并没有提供多选框的选项。引用中的示例也没有展示如何在确认对话框中添加多选框。

如果您需要在elementUI的确认对话框中添加多选框，您可以考虑自定义对话框组件，然后使用elementUI的Dialog组件来实现。在自定义对话框组件中，您可以根据需要添加多选框，并在确认按钮点击时获取多选框的选项值进行处理。

以下是一个示例代码，展示如何自定义对话框组件并添加多选框:

<template>
  <el-dialog :visible.sync="dialogVisible" title="提示" @close="handleClose">
    <div>
      <el-checkbox-group v-model="checkedOptions">
        <el-checkbox label="选项1"></el-checkbox>
        <el-checkbox label="选项2"></el-checkbox>
        <el-checkbox label="选项3"></el-checkbox>
      </el-checkbox-group>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      checkedOptions: []
    };
  },
  methods: {
    handleClose() {
      // 对话框关闭时的逻辑
    },
    cancel() {
      // 取消按钮点击时的逻辑
      this.dialogVisible = false;
    },
    confirm() {
      // 确定按钮点击时的逻辑，处理多选框的选项值
      console.log(this.checkedOptions);
      this.dialogVisible = false;
    }
  }
};
</script>

通过自定义对话框组件，您可以根据需要自由地添加多选框以及其他表单元素，并在确认按钮点击时获取选项值进行处理。请根据您的实际需求进行修改和调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span>