如何使用 vuetify 数据表显示数组的索引？

Question

我有来自服务器的响应，其中包含传递给我的 vue 实例的数据数组。我已经使用该数组完成了数据表。但是我只需要知道如何显示序列号的数组索引。

在这里我附上我的组件代码我的响应还可以，表格也可以。我只需要增加一列并在那里显示索引值。

我的阵列名称是客户。

 <v-data-table
  v-bind:headers="headers"
  v-bind:items="customers"
  v-bind:search="search"
  v-cloak
  >
  <template slot="items" scope="props">
  <td class="text-xs-center">@{{ props.item.id }}</td>
  <td class="text-xs-center">
    <v-edit-dialog
      lazy
      @{{ props.item.name }}
      >
      <v-text-field
        slot="input"
        label="Edit"
        v-model="props.item.name"
        single-line
        counter
        :rules="[max25chars]"
        ></v-text-field>
    </v-edit-dialog>
  </td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.created_at }}</td>
  <td class="text-xs-center">
    <v-btn small outline fab class="red--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-remove</v-icon>
    </v-btn>
    <v-btn small outline fab class="green--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-off</v-icon>
    </v-btn>
  </td>
  </template>
  <template slot="pageText" scope="{ pageStart, pageStop }">
    From @{{ pageStart }} to @{{ pageStop }}
  </template>
</v-data-table>

原文由 Sakil 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑 7/30/19 正如@titou10 提到的， Vuetify 2.0 中没有索引字段。

在环顾四周后，我能够通过使用 item.<name> slot 来实现这一点。这个插槽会给我一个 item 。我根据对象 id 创建了一个 ID 数组，并调用了 indexOf(item.id) 来获取索引位置。

代码笔 在这里。

---

Vuetify 1.x

每个道具对象都包含两个键： item 和 index 。您可以通过 props.index 访问每个项目的索引。添加新标头就像在标头数组中添加新项目一样简单。

这是一个代码笔作为示例。我正在将数据表的第一列更改为索引位置。

https://codepen.io/potatogopher/pen/eGBpVp

原文由 Nick Rucci 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

可以使用的另一种方法是使用计算属性将索引插入数据中的每个元素。如果您需要稍后更新表，因为计算属性会自动更新，这会很有用。

例如，假设项目数据存储在 items 中。

 data() {
  return {
    items: [{
      fruit_name: 'Banana',
      calories: 30
    }, {
      fruit_name: 'Apples',
      calories: 40
    }]
  }
}

在这里，每个元素都是自身加上附加属性，即 index 。元素添加是使用 扩展运算符 实现的。使用 map function 的函数式编程风格将所有映射元素组合成单个数组。

 computed: {
  itemsWithIndex: () {
    return this.items.map(
      (items, index) => ({
        ...items,
        index: index + 1
      }))
  }
}

注意： index: index+1 将使编号从 1 开始。

然后，在 v-data-table 需要的 headers 数据中，您可以参考 index 项目数据进行编号。

 data() {
  return {
    items: {
      ...
    },
    headers: [{
        text: 'Num',
        value: 'index',
      },
      {
        text: 'Fruit Name',
        value: 'fruit_name',
      },
      {
        text: 'Calories',
        value: 'calories',
      }
    ]
  }
}

Codepen 示例： https ://codepen.io/72ridwan/pen/NWPMxXp

原文由 FRR 发布，翻译遵循 CC BY-SA 4.0 许可协议