vue中使用this.$loading()给整个页面添加遮罩

官网介绍：如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 $loading，它的调用方式为：this.$loading(options)，同样会返回一个 Loading 实例。

调用方法：

this.$loading()
this.$loading().close()

使用步骤

1、完整引入了 Element

import ElementUI from 'element-ui' // pc端组件

2、在向后台发起请求前调用this.$loading()，在请求结束后调用this.$loading().close()

saveData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$loading()
            this.getDeptNo()
          }
        })
      },
      //查询企业的部门编码是否已存在
      async getDeptNo() {
        const res = await deptJs.getDeptNo({ deptNo: this.dept.code })
        if (res.data == null || res.data.length == 0) {
          deptJs.addDept(this.dept).then(() => {
            this.dialogFormVisible = false
            this.$loading().close()
            this.returnMessage()
          }).catch(error => {
            this.$loading().close()
            console.log(error)
          })
        } else {
          this.$message.error("此企业编码已存在，请重新输入")
          this.$loading().close()
          return
        }

      }

如果不添加遮罩，就有可能向后台发送两次请求，如果是添加功能的话，则会添加两条相同的记录。