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。在该示例中，如果name与以前的名称相同，则rank列将得到一个=。

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

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

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

2 个答案: