摘要：
templateslot scope=“scope”>；loading=“scope.row.handleSendLoading”size=“mini”type=“info”@click=“handleSend（scope.row）”>；this.deliveryNo）｝否则｛this.$message.warning（response.msg）｝）.最终（（）=>；
一、如何实现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) } }) } }) },