如何使用 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>

Answer 1

简单易懂:)

<template>
    <v-data-table
          :headers="headers"
          :items="items"
          sort-by="calories"
          hide-default-footer
          class="elevation-1"
    >

        <template v-slot:item.count="{item, index}">
            {{index+1}}
        </template>

    </v-data-table>
</template>

<script>

export default {
    data: () => ({
    headers: [
      {
            text: "#",
            sortable: false,
            value: "count",
          },]
        })
}

</script>

Answer 2

感谢this sandbox，我能够使用下面的代码在每一行中显示索引：

<v-data-table
  :headers="headers"
  :items="items"
>
  <template slot="item.rank" scope="props">
    {{ props.index + 1 }}
  </template>
</v-data-table>

标题部分是这样的：

headers: [
  { name: 'rank', value: 'rank' },
  // other headers
]

Answer 3

只需要这样做：

    <template #item.serialNo="{item}">
    <td >
    {{ArrayName.indexOf(item) + 1}}
    </td>
    </template>
    

ArrayName：我们在

的':items'中使用的数组

serialNo：选择列的值

Answer 4

<v-data-table
  :headers="dessertHeaders"
  :items="desserts"
  single-expand
  :expanded.sync="expanded"
  item-key="name"
  show-expand
  class="elevation-1"
>
  <template v-slot:item.sn="{ index }">
    {{ index + 1 }}
  </template>
</v-data-table>

sn 是您要替换索引的标头。

查看此屏幕截图：

Answer 5

你可以用这个：

{{props.index}}

Answer 6

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

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

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

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

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

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

那么，v-data-table需要的headers里面的数据，可以参考index的item数据进行编号。

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

Answer 7

超级简单，使用 indexOf {{items.indexOf(props)}}

Answer 8

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

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

密码笔HERE.

---

Vuetify 1.x

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

这里以 Codepen 为例。我正在将数据表的第一列更改为索引位置。

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