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

Question

我有来自服务器的响应,它将数据数组传递给我的vue实例.我已经使用该数组完成了数据表.但是我需要知道如何显示序列号的数组索引.

在这里我附加我的组件代码我的响应是好的,表也可以.我只需要增加一列,并在那里显示索引值.

提前Tnks我的阵列名称是客户.

<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

每个道具对象都包含两个键:item.<name>和item.您可以通过执行操作来访问每个项目的索引id.添加新标头就像向标题数组添加新项一样简单.

这是一个codepen作为例子.我正在将数据表的第一列更改为索引位置.

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

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，您可以引用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

Answer 3

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

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