Element-ui中关闭dialog时隐藏组件并销毁

在 Element-UI 中，关闭 Dialog 时默认会销毁组件。如果你想在关闭 Dialog 时隐藏组件而不是销毁，可以使用 `destroy-on-close` 属性，将其设置为 `false`。

例如：

<el-dialog :visible.sync="dialogVisible" :destroy-on-close="false">
  <!-- dialog 内容 -->
</el-dialog>

这样当你关闭 Dialog 时，组件不会被销毁，而是被隐藏。如果你需要销毁组件，可以手动将 `dialogVisible` 属性设置为 `false`，或者使用 `this.$refs.dialogName.destroy()` 方法来销毁 Dialog 组件。

相关问题

el-dialog 关闭窗口数据销毁

el-dialog 是 Element UI 中的一个组件，用于创建弹窗窗口。当关闭 el-dialog 窗口时，默认情况下是不会销毁窗口中的数据的。如果需要在关闭窗口时销毁数据，可以通过设置 dialog 的 destroy-on-close 属性来实现。

destroy-on-close 属性是一个布尔类型的属性，设置为 true 时，关闭窗口时会销毁窗口中的数据；设置为 false 时，关闭窗口时不会销毁数据，默认值为 false。

以下是一个示例代码：

<template>
  <div>
    <el-button @click="openDialog">打开弹窗</el-button>
    <el-dialog :visible.sync="dialogVisible" :destroy-on-close="true">
      <!-- 窗口内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    }
  }
};
</script>

在上述示例中，当点击 "打开弹窗" 按钮时，会打开 el-dialog 弹窗。而在 el-dialog 组件中，我们设置了 destroy-on-close 属性为 true，这样当关闭弹窗时，窗口中的数据会被销毁。

el-dialog怎么销毁重新创建

### 回答1：
El Dialog组件可以通过调用`close()`方法来销毁，然后再重新创建它。

以下是示例代码：

// 获取 Dialog 组件实例
const dialogInstance = this.$refs.dialog;

// 关闭 Dialog 组件
dialogInstance.close();

// 销毁 Dialog 组件
dialogInstance.$destroy();

// 重新创建 Dialog 组件
this.$nextTick(() => {
  this.$refs.dialog = this.$createElement(DialogComponent, {
    props: {
      // 重新传递 Dialog 组件需要的 props
      // ...
    },
    // 重新绑定 Dialog 组件的事件
    // ...
  }).$mount();
});

这里假设你已经在组件中使用了 `ref` 来获取 Dialog 组件的实例，因此可以通过 `this.$refs.dialog` 来访问它。然后，你需要先调用 `close()` 方法关闭 Dialog 组件，接着调用 `$destroy()` 方法销毁它。然后，你可以使用 `$createElement` 方法重新创建 Dialog 组件的实例，并通过 `$mount()` 方法将其挂载到 DOM 上。最后，你需要重新绑定 Dialog 组件的事件和传递组件需要的 props。

### 回答2：
el-dialog是Element UI组件库中的对话框组件，要销毁并重新创建el-dialog，可以使用以下步骤：

1. 首先，需要在Vue的数据中定义一个变量来控制el-dialog的显示与隐藏状态。例如，我们可以在data中添加一个变量dialogVisible，并将其初始值设置为false。

2. 在关闭或销毁el-dialog时，我们需要将dialogVisible变量设置为false。可以通过调用一个方法来实现这一步骤。

3. 在重新创建el-dialog之前，需要使用Vue的v-if指令在模板中判断dialogVisible的值。只有当dialogVisible为true时，el-dialog才会被渲染和显示出来。

4. 在重新创建el-dialog时，可以使用v-if指令来动态地将其添加到页面中。可以通过在模板中使用一个按钮来触发重新创建el-dialog的方法。

综上所述，我们可以通过控制一个变量的状态来实现销毁和重新创建el-dialog。

### 回答3：
el-dialog组件可以通过调用close方法来销毁对话框，然后再调用open方法来重新创建对话框。

要销毁el-dialog，可以在使用该组件的地方，调用组件的ref来获取到对话框实例，并调用实例的close方法，例如：

<template>
<el-dialog ref="dialogRef"></el-dialog>
</template>

<script>
export default {
methods: {
destroyDialog() {
this.$refs.dialogRef.close(); // 销毁el-dialog
},
recreateDialog() {
this.$refs.dialogRef.open(); // 重新创建el-dialog
}
}
}
</script>

通过调用ref="dialogRef"来获取到el-dialog的实例，然后可以在需要的时候调用实例的close方法来销毁对话框，调用open方法来重新创建对话框。

需要注意的是，在销毁el-dialog后，如果要重新创建对话框，需要重新设置对话框的属性和内容，因为对话框的状态会被重置。