el-eentui v-loading全屏

Element UI中的`<el-loading>`组件是一个用于显示加载状态的轻量级UI元素，它通常会展示一个圆形的转动加载图标，表示数据正在加载中。如果你想让它占满屏幕作为全屏加载效果，可以结合Vue.js的自定义指令和CSS样式来实现。

首先，在HTML结构上，你可以将`<el-loading>`放在一个包含所有内容的容器外面，并设置其宽高为100%，例如：

<div id="app">
  <div v-loading.fullscreen>
    <!-- 真实的内容将会在这里显示 -->
  </div>
</div>

然后，在Vue的实例里，引入`fullscreen`这个自定义属性，并提供对应的计算属性来控制加载状态：

export default {
  directives: {
    fullscreen: {
      bind(el, binding) {
        el.style.position = 'fixed';
        el.style.top = '0';
        el.style.left = '0';
        el.style.width = '100%';
        el.style.height = '100vh';
      },
      update(value) {
        if (value) {
          // 当值为true时，显示加载状态
          el.style.display = 'flex';
        } else {
          // 否则，隐藏或恢复原样
          el.style.display = value ? 'flex' : 'none';
        }
      },
      unbind() {
        // 解绑时清除样式
        el.style.position = '';
        el.style.display = '';
      }
    }
  },
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    setLoading(isLoading) {
      this.loading = isLoading;
      // 如果需要，你可以在这里处理实际的数据请求
    }
  }
}

当你需要加载时，调用`this setLoading(true)`；完成加载后，调用`this setLoading(false)`。这样，当`loading`状态为真时，`<el-loading>`就会显示并占据整个屏幕。