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

每个道具对象都包含两个键：function bombs_do_not_repeat(){ //Should prevent a 'bomb block' to go inside the same 'block' more than 1 time. Example: //CORRECT: bombs[] = "b1", "b2", "b3", "b4", "b5"; //INCORRECT: bombs[] = "b1", "b1", "b3", "b4", "b4"; var random_num = "b" + random(1,number_of_blocks); for(var j = 0; j < bombs.length; j++){ if(random_num == bombs[j]){ console.info("random_num = " + random_num + " && bombs[" + j + "] = " + bombs[j]); return random_num = bombs_do_not_repeat(); } } return random_num; }和item。您可以通过index访问每个项目的索引。添加新标题就像在标题数组中添加新项一样简单。

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

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

Answer 2

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

例如，假设商品数据存储在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所需的标题数据中，您可以引用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

只需要这样做：

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

ArrayName：我们在

的 ':items' 中使用的数组

serialNo：选择列的值

Answer 5

超级简单，请使用indexOf {{items.indexOf（props）}}

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: [
  { name: 'rank', value: 'rank' },
  // other headers
]

Answer 7

您可以使用此：

{{props.index}}

Answer 8

<v-data-table :headers="headers" :items="items" :search="search" :pagination.sync="pagination">
    <template v-slot:items="props">
        <tr>
            <td>{{ (pagination.page-1)*pagination.rowsPerPage + props.index + 1 }}</td>
        </tr>
    </template>
</v-data-table>

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

8 个答案: