在el-dialog中打开 el-dialog 去掉遮罩层后先打开的el-dialog不能操作

在el-dialog中打开el-dialog后，如果去掉了遮罩层，那么先打开的el-dialog将无法操作。为了解决这个问题，可以在新打开的el-dialog中设置`append-to-body="true"`。这样可以将el-dialog的DOM元素直接添加到body中，避免了嵌套的问题，使得先打开的el-dialog可以正常操作。

具体代码如下：

<template>
  <el-dialog title="表单" :close-on-click-modal="false" width="80%" :append-to-body="true" :visible.sync="visible">
    <!-- el-dialog的内容 -->
  </el-dialog>
</template>

这样设置后，先打开的el-dialog就可以正常操作了。

相关问题

vue中在el-dialog中再打开一个el-dialog

在Vue中，在el-dialog中再打开一个el-dialog可以通过嵌套组件的方式来实现。

具体实现方法如下：

1. 创建一个弹窗组件，例如MyDialog，用于显示一个el-dialog。

2. 在MyDialog组件中，添加一个插槽用于显示弹窗内容，并在插槽中使用el-dialog组件来实现弹窗的显示和隐藏。

例如，在MyDialog组件中实现一个弹窗：

<template>
  <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" @close="onClose">
    <slot></slot>
    
    <el-dialog v-if="showChildDialog" :visible.sync="childDialogVisible" @close="onChildDialogClose">
      <div>子弹窗内容</div>
    </el-dialog>
  </el-dialog>
</template>

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

在上面的代码中，使用了el-dialog组件来实现弹窗的显示和隐藏，同时添加了一个插槽用于显示弹窗内容。在插槽中，再次使用el-dialog组件来实现子弹窗的显示和隐藏。

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

例如，在父组件中引入MyDialog组件并打开弹窗：

<template>
  <div>
    <button @click="showDialog = true">打开弹窗</button>
    
    <my-dialog v-if="showDialog" :dialogTitle="dialogTitle" @close="showDialog = false">
      <div>
        弹窗内容
        <button @click="showChildDialog = true">打开子弹窗</button>
      </div>
    </my-dialog>
  </div>
</template>

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

export default {
  components: {
    MyDialog
  },
  data() {
    return {
      showDialog: false,
      dialogTitle: '弹窗标题'
    }
  }
}
</script>

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

通过以上步骤，就可以在一个el-dialog中再打开一个el-dialog了。注意，在嵌套的el-dialog中，需要使用v-if或v-show指令来控制显示和隐藏，并在组件中添加相应的事件来关闭弹窗。

el-dialog中再打开另一个el-dialog

在 Element UI 的 el-dialog 中打开另一个 el-dialog 可以通过以下步骤实现：

1. 确保你已经在代码中引入了 Element UI 的 el-dialog 组件。

2. 在打开第一个 el-dialog 的方法中，加入 `beforeClose` 属性，这个属性可以设置一个回调函数，在第一个 el-dialog 关闭之前执行。

3. 在 `beforeClose` 回调函数中，通过 `this.$refs` 获取到第二个 el-dialog 的实例对象，并调用其 `open()` 方法打开第二个 el-dialog。

以下是一个示例代码：

<template>
  <div>
    <el-dialog
      title="第一个弹框"
      :visible.sync="dialogVisible"
      :beforeClose="handleClose">
      <p>内容</p>
    </el-dialog>
    <el-dialog
      title="第二个弹框"
      :visible.sync="dialogVisible2">
      <p>内容</p>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false
    };
  },
  methods: {
    handleClose(done) {
      if (this.dialogVisible2) {
        this.$refs.dialogVisible2.open();
        done(false);
      } else {
        done();
      }
    }
  }
};
</script>