如何实现table表格中或对话框中的button按钮有加载中Loading的效果

一、如何实现table表格中的button按钮有加载中的效果

效果：

 前端代码：

<el-table-column label="送货单信息" align="center" width="110">
        <template slot-scope="scope">
          <el-button slot="reference" :loading="scope.row.handleSendLoading" size="mini" type="info"
            @click="handleSend(scope.row)">送货单</el-button>
        </template>
      </el-table-column>

即给el-button按钮loading属性定义一个变量handleSendLoading。当点击按钮，执行handleSend方法时，给这个变量赋值为true

handleSend(row) {
  row.handleSendLoading = true
  this.buttonLoading = true
  let supplyNote = {
    varietyType: row.varietyType,
    prepareId: row.prepareId,
    supplyId: row.supplyId
  }
  let data = Object.assign({}, row)
  prepareInfo.getPrepareInfoBySupplyId(supplyNote, 2).then(response => {
    row.handleSendLoading = false
    if (response.success) {
      this.$refs['edit'].openCreateDialog(data, this.deliverNo)
    } else {
      this.$message.warning(response.msg)
    }
  }).finally(() => {
    this.buttonLoading = false // 注意：一定要在
  })
},

请求成功后将handleSendLoading变量设置为false。另外还要保证出现异常也要将handleSendLoading变量设置为false，故要在finally中将handleSendLoading设置为false。

如果需要验证，则应该在验证通过后再设置为true，而不能在验证通过之前设置为true，否则没有通过验证就处于加载中。

create(edit) {
      this.$refs['from'].validate((valid) => {
        if (valid) {
          const query = {
              inId: this.edit.inId,
              productNo: this.edit.productNo
          }
            console.log(query)
            this.isLoading = true
          inStoreDetail.create(query).then(response => {
            console.log(response)
            this.isLoading = false
            if (response.success === true) {
              this.dialogFormVisible = false
              this.$message.success('添加成功')
              this.returnMessage()
            } else {
                this.$message.warning(response.msg)
                this.dialogFormVisible = false
            }
          }).catch(error => {
            this.$loading().close()
            this.$message.error('添加失败')
            this.dialogFormVisible = false
            console.log(error)
          }).finally(() =>{
　　　　　　   this.isLoading = false  // 一定要在finally中加上该行代码，否则报错后按钮仍然一直是处于加载中的效果
　　　　　　})
        }
      })
    },

二、如何给对话框中的按钮添加加载中的效果

效果：

 前端代码：

<div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreate()" :loading="btnloading">去打印发货单</el-button>
      </div>

给el-button按钮添加loading属性btnloading,在向后台发出请求前设置为true，请求结束后改为false

handleCreate方法：

 handleCreate() {
　　　　　　。。。。。。
　　this.$refs['form'].validate((valid) => {
          if (valid) {
            //修改送货设备信息
            this.btnloading = true
            const form = {
              prepareDeliver: this.prepareDeliver,
              prepareInfo: this.supplyNote.prepareInfoList[0]
            }
            prepareDeliver.updateOnly(form).then(response => {
              this.btnloading = false
              if (response.success) {
                this.returnMessage()
　　　　　　　　　　。。。。

              } else {
                this.$message.error(response.msg)
              }
            })
          }
        })
      },

三、使用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
        }

      }

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