先上效果图：
说明：在table中，点击不同行的发送按钮，只有此行的按钮进行加载，请求后台成功后停止加载。
具体看代码（只有前台代码）：
<template>
<el-table :data="userList" border fit class="user_table">
<el-table-column label="姓名" prop="chinaName" align="center"></el-table-column>
<el-table-column label="电话" prop="phone" align="center"></el-table-column>
<el-table-column label="操 作" align="center">
<template slot-scope="scope">
<div class="scope_inline">
<el-input v-model="scope.row.msg" placeholder="请输入消息" />
<el-button type="primary" size="mini" :loading="scope.row.loading" @click="sendMsg(scope.row)">发送
</el-button>
</div>
</template>
</el-table-column>
</el-table>
</template>
<script>
import { user } from ‘@/api/user‘
export default {
data() {
return {
userList: []
}
},
created() {
this.getList()
},
methods: {
//查询用户列表
getList() {
user.getList().then(res => {
this.userList = res.data
this.userList.map(item => {
//添加属性，设置默认值
this.$set(item, ‘loading‘, false)
return item
})
}, err => {
console.log(err)
})
},
//发送消息
sendMsg(row) {
row.loading = true
user.sendMsg({
id: row.id,
msg: row.msg
}).then(res => {
if (res.code == 200) {
row.loading = false
}
}, err => {
console.log(err)
})
}
},
}
</script>
<style scoped>
.user_table{
width: 800px;
}
.scope_inline{
display: flex;
}
</style>
从代码可以看出，是给每一行的按钮都设置了一个加载的状态，而不是设置一个全局的变量。在请求前，设置此行的按钮为加载状态，在请求成功后取消加载。
需要注意的是，在进行网络请求中修改加载状态时，需先设置其初始值。否则不生效。设置初始值也就是在getList()方法时进行的，设置每行的loading默认初始值是false。这是因为在请求过程中修改状态时Vue不能检测到对象属性的添加或删除，就必须先给对象添加此属性，然后再去修改。