vue elementui 加载中全页加载在提交表单写个案例

好的，以下是一个示例代码：

<template>
  <div>
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="姓名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
    <div v-if="loading" class="loading">
      <el-loading-spinner></el-loading-spinner>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: ''
      },
      loading: false
    }
  },
  methods: {
    submitForm() {
      this.loading = true;
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 发送表单数据
          setTimeout(() => {
            // 模拟请求
            this.loading = false;
            this.$message({
              message: '提交成功',
              type: 'success'
            });
          }, 2000);
        } else {
          this.loading = false;
          this.$message({
            message: '表单校验失败',
            type: 'error'
          });
          return false;
        }
      });
    }
  }
}
</script>

<style>
.loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255,255,255,0.5);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在这个示例中，我们使用了 `el-loading-spinner` 组件作为加载动画，将其放在一个 `div` 中，并使用 `v-if` 条件渲染控制其显示和隐藏。在点击提交按钮时，将 `loading` 置为 `true`，然后进行表单校验和数据提交，提交成功后将 `loading` 置为 `false`，表示加载完成。