javascript - 使用 Vue.js 和 v-repeat 对特定表格单元格进行样式化

Question

我有一个使用 Vue.js 绑定(bind)到数据的表。为每个玩家创建一行 (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>