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

一、如何实现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。

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

效果：

 前端代码：

<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)
              }
            })
          }
        })
      },