Vue Eltablecolumn Buttonloading
element-ui中table-column的button按钮loading状态
在我们的项目中，往往需要在一个列表页里展示全部的数据，每一行展示各种数据；
但是由于是测试工具，所以经常需要在每一行中嵌入按钮，通过<template slot-scope="scope">来让每行的button获取它所在行的全部数据，从而提取这一行中的某个字段，继而发出ajax请求，column代码示例如下：
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
type="success"
:loading="launchLoading === scope.row.task_id"
@click="handleLaunch(scope.row.task_id)"
>启动</el-button>
<el-button
size="mini"
type="danger"
:loading="stopLoading === scope.row.task_id"
@click="handleStop(scope.row.task_id)"
>停止</el-button>
<el-button
size="mini"
type="warning"
plain
@click="handleCopy(scope.row.task_id), goAdd()"
>复制</el-button>
</template>
</el-table-column>
这里的操作是：按下这一行的按钮，它会获取这一行的task_id，并作为形参传递给绑定的click方法@click="handleLaunch(scope.row.task_id)
如果只是为了传递正确的data，其实这里已经完成了操作，但是为了用户体验，往往需要在按钮上再绑定loading状态，element官方示例如下：
要设置为 loading 状态，只要设置loading属性为true即可。
<el-button type="primary" :loading="true">加载中</el-button>
那么只要通过控制:loading绑定的值，就可以手动控制按钮的loading效果啦！
但是！！！如果这个按钮在table中，直接绑定的结果是点击任何一行的按钮，全部的按钮都在转圈圈，看起来极其愚蠢0.0
曾经我的解决方法是让后端返回的数据里，每一行都加入一个loading字段，默认是false，之后每一行中都可以获取到，那么当我按下这一行的按钮，同时修改为true就可以控制只有当前焦点的button有loading圈圈了。
可是这样还是很蠢啊。
后来在开发同事的启发下，el-table-column部分如前面所示，在data()中设置launchLoading布尔值，默认false，绑定的click方法如下：
handleLaunch(task_id) {
this.launchLoading = task_id
// 启动
var data = {
task_id: task_id
}
console.log(data)
reqRtcLaunch(data).then((result) => {
// console.log(result)
this.$message({
message: '启动成功O(∩_∩)O~',
type: 'success'
})
this.launchLoading = false
this.fetchRtcList()
}).catch((err) => {
console.log(err)
this.launchLoading = false
})
}
这样就能确保没有点击的按钮的loading值都是false，谁被点击了谁就会被设置task_id，那么:loading又是绑定了判断布尔值:loading="launchLoading === scope.row.task_id"，所以这样就可以完美的控制状态了，也完全不需要后端返回额外的字段。
