vue+elementUI添加数据全屏加载loading效果

在Vue中使用Element UI时，可以通过全局加载状态（Loading）来实现全屏加载效果。以下是一个简单的示例，展示如何在添加数据时显示全屏Loading效果：

1. 首先，确保你已经在项目中安装并导入了Element UI。
2. 在Vue组件中，你可以使用Element UI的Loading服务来实现全屏加载效果。

<template>
  <div>
    <!-- 这里是你的页面内容 -->
  </div>
</template>
 
<script>
  export default {
    methods: {
      addDataWithLoading() {
        // 显示全屏Loading
        const loading = this.$loading({
          lock: true,
          text: '正在添加数据...',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        
        // 模拟添加数据的异步操作
        setTimeout(() => {
          // 数据添加完毕后，关闭Loading
          loading.close();
        }, 3000);
      }
    }
  }
</script>

在上面的代码中，addDataWithLoading方法会在添加数据时显示全屏的Loading效果。通过调用this.$loading方法，并传入一个对象配置Loading的样式和文本，可以创建一个全屏的遮罩层。使用setTimeout模拟了数据添加的异步操作，操作完成后通过调用loading.close()来关闭Loading效果。