el-dialog打开其他页面

在Element UI库中的`el-dialog`组件主要用于弹出窗口展示信息或让用户进行操作，它本身并不直接支持打开其他完整的HTML页面。如果你想在dialog中加载并显示另一个页面，你可以采用以下几种方式：

1. 使用`v-loading`配合路由跳转：在`el-dialog`的内容区域添加一个`<router-view></router-view>`标签，并在打开dialog时显示loading状态，然后通过`this.$router.push`或`this.$router.go`跳转到新的页面。

<template>
  <el-dialog :visible.sync="dialogVisible" width="80%">
    <div v-loading="isLoading">
      <router-view></router-view>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      isLoading: true,
      toPage: '/new-page', // 新页面路径
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
      this.isLoading = true; // 开始加载
      setTimeout(() => { // 模拟异步加载时间
        this.isLoading = false; // 加载完成
        this.$router.push(this.toPage); // 跳转到新页面
      }, 1500);
    }
  }
};
</script>

2. 异步组件加载：如果你正在使用Vue的动态组件功能，可以在dialog内容里使用`async`组件，当dialog显示时请求数据并渲染对应组件。

<template>
  <el-dialog :visible.sync="dialogVisible" width="80%">
    <keep-alive>
      <component :is="loadedComponent"></component>
    </keep-alive>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      loadedComponent: null,
    };
  },
  async mounted() {
    this.loadedComponent = await fetchYourPage(); // 获取你需要的组件
  },
  methods: {
    openDialog() {
      this.dialogVisible = true;
    },
  },
  computed: {
    fetchYourPage() {
      // 这里可以是异步获取组件函数
      // 例如 axios.get('/api/page') 返回一个 promise 包含组件实例
      // 或者从缓存、路由守卫等方式获取
      const yourPage = localStorage.getItem('yourPage') || ...;
      if (yourPage) return yourPage; // 如果有缓存则直接返回
      return new Promise((resolve) => {
        // 真实异步获取，比如从服务器请求
        setTimeout(() => {
          resolve(yourPageComponent); // 替换成实际的组件实例
        }, 1500);
      });
    },
  },
};
</script>