添加自定义编号上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。

Answer 2

还有，你能做到这一点的template一个非常简单的方法。看看在example。在如果名字是一样的以前的名称的例子中，排名列会得到一个=。

在你的代码中的列会是这个样子：

<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>