如何實現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)
              }
            })
          }
        })
      },