Vuejs 如何對(duì)單個(gè)元素進(jìn)行狀態(tài)控制？

如題，最近在寫(xiě)一個(gè)后臺(tái)應(yīng)用

需要在點(diǎn)擊『刪除按鈕』時(shí)使按鈕進(jìn)入 loading 狀態(tài)，并對(duì)數(shù)據(jù)進(jìn)行刪除操作，

<el-button type="danger" icon="iconfont-guanbi" size="small" @click="remove(scope.$index)"> 刪除</el-button>

...

 methods: {
    remove(index) {
        this.datas.splice(index,1);
    }
},

于是乎遇到了一個(gè)問(wèn)題，如果使用單個(gè)數(shù)據(jù)綁定此按鈕以表示 loading 狀態(tài)，那么點(diǎn)擊任意刪除按鈕時(shí)其他按鈕全部都會(huì)進(jìn)入 loading 狀態(tài)，但是如果使用多個(gè)數(shù)據(jù)綁定的話，我無(wú)法得知此表格會(huì)有多少列（后端數(shù)據(jù)不定性），有什么好的方法可以實(shí)現(xiàn)此需求嗎？

回答

編輯回答

挽青絲

可以改造后端數(shù)據(jù)

在請(qǐng)求到后端數(shù)據(jù)（這里應(yīng)該是個(gè)數(shù)組）之后，給數(shù)組的每一項(xiàng)加一個(gè) isRemoving，到時(shí)候根據(jù)這個(gè)屬性來(lái)顯示loading就行

2017年8月31日 20:12

編輯回答

使勁操

我的想法如下，直接復(fù)制粘貼運(yùn)行便可看到效果，希望能對(duì)你有所幫助！ [最終版]：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>example</title>
    <!-- 引入樣式 -->
    <link rel="stylesheet" >
</head>
<body>
    <div id="app">
        <el-table :data="tableData4" style="width: 100%" max-height="250">
            <el-table-column prop="id" label="ID" width="150">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="province" label="省份" width="120">
            </el-table-column>
            <el-table-column prop="city" label="市區(qū)" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" width="300">
            </el-table-column>
            <el-table-column prop="zip" label="郵編" width="120">
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template slot-scope="scope">
                    <el-button
                      @click.native.prevent="deleteRow(scope.$index, tableData4, scope.row.id)"
                      type="text"
                      size="small"  v-loading="haha === scope.row.id || scope.row.show"> <!-- row.show一定要寫(xiě)在后面 -->
                      移除
                    </el-button>
                  </template>
            </el-table-column>
        </el-table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            methods: {
                deleteRow(index, rows, id) {
                    var _this = this;
                    _this.haha = id;
                    for (var i = 0; i < rows.length; i++) {
                        if (rows[i].id === id) {
                            rows[i].show = true;
                        }
                    }
                    (function(rows, index) {
                        setTimeout(function() {
                            _this.setData(rows[index]);
                        }, 2000);
                    })(rows, index);

                },
                setData(buff_data) {
                    return this.tableData4 = this.tableData4.filter((val) => {
                        return buff_data.id != val.id;
                    })
                }
            },
            data() {
                return {
                    haha: -1, //用于控制v-loading
                    tableData4: [{
                        id: 1,
                        name: '王小虎',
                        province: '上海',
                        city: '普陀區(qū)',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        id: 2,
                        name: '王小虎',
                        province: '上海',
                        city: '普陀區(qū)',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        id: 3,
                        name: '王小虎',
                        province: '上海',
                        city: '普陀區(qū)',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        id: 4,
                        name: '王小虎',
                        province: '上海',
                        city: '普陀區(qū)',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        id: 5,
                        name: '王小虎',
                        province: '上海',
                        city: '普陀區(qū)',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        id: 6,
                        name: '王小虎',
                        province: '上海',
                        city: '普陀區(qū)',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        zip: 200333
                    }, {
                        id: 7,
                        name: '王小虎',
                        province: '上海',
                        city: '普陀區(qū)',
                        address: '上海市普陀區(qū)金沙江路 1518 弄',
                        zip: 200333
                    }]
                }
            }
        })
    </script>
</body>
</html>

實(shí)現(xiàn)原理

利用數(shù)據(jù)中的id唯一性，當(dāng)點(diǎn)擊刪除按鈕時(shí)，將點(diǎn)擊的數(shù)據(jù)的id賦值給data中的控制變量，此時(shí)模板中的v-loading會(huì)因?yàn)榭刂谱兞亢?code>id相等而出現(xiàn)加載動(dòng)畫(huà)。

v-loading="haha === scope.row.id || scope.row.show"順序不要變，避免出錯(cuò)，剛開(kāi)始是沒(méi)有show屬性的

2017年1月2日 21:19

編輯回答