el-dialog 每次生成新的

el-dialog 组件在每次生成新的实例时，可以通过以下步骤来实现：

1. 在你的组件中引入 el-dialog 组件：

import { Dialog } from 'element-ui';

2. 在你的组件中定义一个变量来控制是否显示 el-dialog：

data() {
  return {
    showDialog: false // 控制 el-dialog 是否显示的变量
  };
}

3. 在你的模板中使用 el-dialog 组件，并绑定 showDialog 变量来控制显示和隐藏：

<template>
  <div>
    <el-button @click="showDialog = true">显示对话框</el-button>
    <el-dialog :visible="showDialog" @close="showDialog = false">
      <!-- 对话框内容 -->
    </el-dialog>
  </div>
</template>

4. 现在，每次点击按钮时，showDialog 变量会被设置为 true，对话框将显示出来。点击对话框的关闭按钮或者点击遮罩层时，@close 事件会被触发，将 showDialog 设置为 false，对话框会隐藏起来。

这样，每次生成新的 el-dialog 实例时，你只需要修改 showDialog 变量的初始值即可。

相关问题

el-dialog缓存

el-dialog 是 Element UI 提供的组件，它默认是不会被缓存的，每次打开都会重新创建。如果需要缓存 el-dialog，可以通过以下几种方式实现：

1. 使用 keep-alive 组件包裹 el-dialog 组件，这样就可以将 el-dialog 缓存起来。但是需要注意的是，keep-alive 只能缓存有 name 属性的组件，所以需要给 el-dialog 设置 name 属性。

2. 使用 vuex 管理 el-dialog 的状态，通过控制 vuex 中的变量来控制 el-dialog 的显示和隐藏。这种方式需要手动管理 el-dialog 的状态，但是可以更加灵活地控制 el-dialog 的显示和隐藏。

3. 使用路由懒加载的方式来加载 el-dialog 组件，这样可以将 el-dialog 缓存到路由中。但是需要注意的是，路由懒加载只适用于在路由中使用 el-dialog 的场景，如果需要在其他地方使用 el-dialog，还需要结合其他方式来实现缓存。

el-dialog 动态刷新

为了实现el-dialog的动态刷新，可以采用以下两种方法：

1.使用v-if指令
可以在el-dialog上使用v-if指令，将其与一个Boolean类型的变量绑定。当需要刷新el-dialog时，只需要将该变量取反即可。这样，每次打开el-dialog时，都会重新渲染el-dialog内部的组件，从而实现动态刷新。

2.使用key属性
在el-dialog上使用key属性，将其与一个变量绑定。当需要刷新el-dialog时，只需要修改该变量的值即可。这样，每次打开el-dialog时，都会重新创建一个新的el-dialog实例，从而实现动态刷新。

下面是两种方法的示例代码：

1.使用v-if指令

<template>
  <div>
    <el-button @click="showDialog">打开el-dialog</el-button>
    <el-dialog :visible.sync="dialogVisible" v-if="refreshDialog">
      <el-table :data="tableData"></el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      refreshDialog: false
    };
  },
  methods: {
    showDialog() {
      // 获取数据并更新tableData
      this.refreshDialog = true; // 刷新el-dialog
      this.dialogVisible = true;
    }
  }
};
</script>

2.使用key属性

<template>
  <div>
    <el-button @click="showDialog">打开el-dialog</el-button>
    <el-dialog :visible.sync="dialogVisible" :key="dialogKey">
      <el-table :data="tableData"></el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      dialogKey: 0
    };
  },
  methods: {
    showDialog() {
      // 获取数据并更新tableData
      this.dialogKey++; // 刷新el-dialog
      this.dialogVisible = true;
    }
  }
};
</script>