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
        }

      }

如果不添加遮罩，就有可能向后台發送兩次請求，如果是添加功能的話，則會添加兩條相同的記錄。