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

Question

我收到来自服务器的响应，其中包含传递到我的 vue 实例的数据数组。我已经使用 array.But 完成了数据 table 我需要知道的是如何显示序列号的数组索引。

这里附上我的组件代码我的回复没问题 table 没问题 too.I 只需要增加一列并在那里显示索引值。

我的数组名称是客户。

<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

编辑 2019 年 7 月 30 日 正如 @titou10 提到的，Vuetify 2.0.

中没有索引字段

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

码笔HERE.

Vuetify 1.x

您的每个道具 object 都包含两个键：item 和 index。您可以通过 props.index 访问每个项目的索引。添加新的 header 就像向 headers 数组添加新项目一样简单。

这里以codepen为例。我正在将 data-table 的第一列更改为索引位置。

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

Answer 2

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

Answer 3

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

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

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

这里，每个元素本身加上附加属性，即index。使用 spread operator. All mapped elements are combined into single array using functional-programming style of map function.

实现元素添加

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

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

然后v-data-table需要的headers数据里面可以参考indexitem数据进行编号

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 4

你可以使用这个：

{{props.index}}

Answer 5

<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 是您要替换索引的 header。

查看此屏幕截图：

Answer 6

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

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

headers 部分是这样的：

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

Answer 7

只需要这样做：

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

ArrayName：我们在

的 ':items' 中使用的数组

serialNo: select 列

的值

Answer 8

简单易行:)

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

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

How to display the index of an array using the vuetify data table?

arrays

laravel

vue.js

datatables

vuetify.js