使用 Vue.js 和 v-repeat 设置特定表格单元格的样式

Question

我有一个使用 Vue.js 绑定到数据的表。为每个玩家创建一行 (TR)。对于播放器中的每个报告，创建一个单元格 (TD)。这很好，但我想在当前报告 ID 的最后一个单元格中添加一个类。

所以...

<tr>
    <td></td>                     //rptID = 1
    <td></td>                     //rptID = 1
    <td></td>                     //rptID = 1
    <td class="lastOfRptID"></td> //rptID = 1
    <td></td>                     //rptID = 2
    <td class="lastOfRptID"></td> //rptID = 2
</tr>

这是我的示例代码：

var objArr = [
    {
        playerID: 1,
        rpts: [
            {rptID: 1,score: 1},
            {rptID: 1,score: 2},
            {rptID: 1,score: 3},
            {rptID: 1,score: 4},
            {rptID: 2,score: 1},
            {rptID: 2,score: 2}
        ]
    },
    {
        playerID: 2,
        rpts: [
            {rptID: 1,score: 5},
            {rptID: 1,score: 6},
            {rptID: 1,score: 7},
            {rptID: 1,score: 8},
            {rptID: 2,score: 3},
            {rptID: 2,score: 4}
        ]
     }
];
var vue = new Vue({
    el: '#rpts',
    data: {
        title: 'reports',
        reports: objArr
    }
});

table {
    width:99%;
    height:20px;
}
td {
    border:1px solid #000;
    border-collapse: collapse;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.11.10/vue.min.js"></script>
<table id="rpts">
    <tr v-repeat="reports">
        <td v-repeat="rpts | orderBy 'rptID'">{{score}}</td>
    </tr>
</table>

谢谢！

Answer 1

我会首先通过运行每个 rpts 来预处理您的数据，如果该行是该报告的最后一个，则向该行添加一个标志（使用 lodash 的示例代码）：

_.forEach(objArr, function (obj, index) {
    var previousRpt = null;
    _.forEach(obj.rpts, function (rpt, index) {
        if (previousRpt == null || previousRpt.rptId == rpt.rptId) {
            previousRpt.last = false;
        }
        rpt.last = true;
        previousRpt = rpt;
    });
});

然后像这样使用这个新值：

<table id="rpts">
    <tr v-repeat="reports">
        <td v-repeat="rpts | orderBy 'rptID'"
            v-class="lastOfRptID: last">{{score}}</td>
    </tr>
</table>