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>