如何实现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)
              }
            })
          }
        })
      },