vue+elementui代码加载完成才显示页面（loading加载页面）

在Vue中使用Element UI时，可以通过全局加载状态（Spinner）来实现页面加载完成后才显示内容。以下是一个简单的示例：

1. 首先，在Vue实例的data中定义一个变量isLoading来控制加载状态。
2. 在created生命周期钩子中设置isLoading为true，表示开始加载。
3. 在mounted生命周期钩子中设置isLoading为false，表示加载完成。
4. 使用Element UI的<el-spinner>组件来显示加载状态，并通过v-if指令来控制其显示与否。

<template>
  <div>
    <!-- 加载状态 -->
    <el-spinner v-if="isLoading"></el-spinner>
    <!-- 页面内容 -->
    <div v-if="!isLoading">
      <!-- 这里是你的页面其他内容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      isLoading: true
    };
  },
  created() {
    // 模拟异步数据加载
    setTimeout(() => {
      // 数据加载完成后，设置加载状态为false
      this.isLoading = false;
    }, 2000); // 假设数据加载需要2秒钟
  }
};
</script>

在这个示例中，当Vue实例被创建后，会在2秒钟后模拟加载数据完成，并通过设置isLoading为false来停止显示加载状态，并显示页面内容。这样可以确保在页面内容完全加载显示给用户之前，用户看到一个加载状态的提示。