Javascript 向Vuetify数据表行添加自定义编号

我有一个使用Vuetify datatables的Vue.js项目。这些表格显示了从最快到最慢的运动成绩排名列表

我可以使用props.index添加一个简单的（排名）编号系统，但是在两个性能相同的情况下，我如何操作它呢？我需要跳过该行的数字或添加一个=号（）

以下方法适用于Vue js中的标准表，但不适用于使用props.item.xxx方法的Vuetify数据表

我使用的代码：

<tr v-for="(result, index) in resultsData" :key="index">

    <template v-if="resultsData[index-1]">
        <td v-if="result.time == resultsData[index-1].time></td>
            &nbsp;
        <td v-else>
            {{index + 1}}
        </td>
    </template>

    <template v-else>
        <td>{{index + 1}}</td>
    </template>

<tr>

{{props.index+1}}
{{props.index+1}}
{{props.item.time | removeladzeros}{{props.item.distHeight | removeladzeros}}{{props.item.points | removeladzeros}}
{{props.item.wind}
{{props.item.nameFirst}{{props.item.nameLast}}
{{props.item.centreID}
{{props.item.DOB}
{{props.item.placeing}
{{props.item.competition}
{{props.item.VICE}
{{props.item.date}
国际田联标准10.12{{props.item.competition}
我的Vuetify表设置

我不熟悉Vuetify，但假设它没有做任何异常的事情，我认为您可以只传递一个计算属性，而不是原始的

索引项

：

computed: {
    rankedItems() {
        const items = [];
        if (this.indexedItems.length > 0) {
            items[0] = this.indexedItems[0];
            items[0].rank = 1;
            for (let index = 1; index < this.indexedItems.length; index++) {
                items[index] = this.indexedItems[index];
                if (items[index].time === items[index - 1].time) {
                    items[index].rank = "";
                } else {
                    items[index].rank = index + 1;
                }
            }
        }
        return items;
    }
}

直接使用新的

.rank

属性即可

<td>
  {{props.rank}}
</td>

{{props.rank}

---

如果您确实需要不间断的空间，可以使用

v-html

在

模板中有一种非常简单的方法。
请看下面的图片。在本例中，如果名称与前一个名称相同，则秩列将获得
=

在您的代码中，列的外观如下所示：

<td v-if="resultsData[props.index -1] && resultsData[props.index -1].name === props.item.time">=</td>
<td v-else>{{ props.index}}</td>
<td>{{props.item.time | removeLeadZeros}} {{props.item.distHeight | removeLeadZeros}} {{props.item.points | removeLeadZeros}}</td>
<td class="text-xs-left">{{ props.item.wind }}</td>
<td class="text-xs-left">{{ props.item.nameFirst }} {{ props.item.nameLast }} </td>
<td class="text-xs-left">{{ props.item.centreID }}</td>
<td class="text-xs-left">{{ props.item.DOB }}</td>
<td class="text-xs-left">{{ props.item.placing }}</td>
<td class="text-xs-left">{{ props.item.competition }}</td>
<td class="text-xs-left">{{ props.item.venue }}</td>
<td class="text-xs-left">{{ props.item.date }}</td>

=
{{props.index}
{{props.item.time | removeladzeros}{{props.item.distHeight | removeladzeros}}{{props.item.points | removeladzeros}}
{{props.item.wind}
{{props.item.nameFirst}{{props.item.nameLast}}
{{props.item.centreID}
{{props.item.DOB}
{{props.item.placeing}
{{props.item.competition}
{{props.item.VICE}
{{props.item.date}
谢谢Stephen，这个解决方案非常有效，正是我所需要的。很好的解决方案Jeremy-谢谢！非常干净和简单-工作刚刚好！
<td v-if="resultsData[props.index -1] && resultsData[props.index -1].name === props.item.time">=</td>
<td v-else>{{ props.index}}</td>
<td>{{props.item.time | removeLeadZeros}} {{props.item.distHeight | removeLeadZeros}} {{props.item.points | removeLeadZeros}}</td>
<td class="text-xs-left">{{ props.item.wind }}</td>
<td class="text-xs-left">{{ props.item.nameFirst }} {{ props.item.nameLast }} </td>
<td class="text-xs-left">{{ props.item.centreID }}</td>
<td class="text-xs-left">{{ props.item.DOB }}</td>
<td class="text-xs-left">{{ props.item.placing }}</td>
<td class="text-xs-left">{{ props.item.competition }}</td>
<td class="text-xs-left">{{ props.item.venue }}</td>
<td class="text-xs-left">{{ props.item.date }}</td>