先上效果圖：

說明：在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不能檢測到物件屬性的新增或刪除，就必須先給物件新增此屬性，然後再去修改。