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

Question

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

我可以使用 props.index 添加一个简单的(排名)编号系统 - 但是在两个性能相等的情况下我如何操作它？我需要跳过该行的数字或添加 = 符号 ( as seen in this example screenshot )

以下方法适用于 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>

<v-data-table
  :headers="headers"
  :items="indexedItems"
  :loading="loading"
  :expand="expand"
  item-key=id
  :rows-per-page-items="[50]"
>

  <v-progress-linear slot="progress" color="blue" indeterminate></v-progress-linear>

  <template slot="items" slot-scope="props">
    <tr @click="props.expanded = !props.expanded" :key="props.item.id">

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

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

      <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>
    </tr>
  </template>
  <template slot="expand" slot-scope="props">
    <v-card flat>
      <v-card-text>IAAF Standard 10.12 | {{ props.item.competition }}</v-card-text>
    </v-card>
  </template>

</v-data-table>

My Vuetify table setup

Answer 1

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

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 属性。我假设没关系。

然后在您的模板中将该计算属性传递给组件:

<v-data-table
  :headers="headers"
  :items="rankedItems"
  :loading="loading"
  :expand="expand"
  item-key=id
  :rows-per-page-items="[50]"
>

并且直接使用新的 .rank 属性。

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

如果确实需要不间断空格，可以使用v-html。