如何添加对表格进行编号的列？

Question

我将 data-table 与 vuetify 结合使用，您可以在下图中看到我想要的最终结果。 只需在左侧添加一列即可。 我将 data-table 与 vuetify 结合使用，您可以在下图中看到我想要的最终结果。 只需在左侧添加一列即可。

<template>
  <v-card>
    <v-card-title>
      <v-text-field
        v-model="search"
        append-icon="mdi-magnify"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :items="products.records"
      :search="search"
      :loading="isLoading"
    ></v-data-table>
  </v-card>
</template >

<script>
export default {
  name: "products",
  data() {
    return {
      search: "",
      headers: [
        {
          text: "Year",
          align: "start",
          filterable: true,
          value: "fields.year",
        },
        { text: "Item", value: "fields.item" },
        { text: "Element", value: "fields.element" },
        { text: "Value", value: "fields.value" },
        { text: "Unit", value: "fields.unit" },
        { text: "Area Code", value: "fields.area_code" },
        { text: "Area", value: "fields.area" },
      ],
      isLoading:true,
    };
  },
  created() {
    this.$store.dispatch("loadProducts");
  },
  computed: {
    products() {
      return this.$store.state.products;
      
    },
  },
  updated(){
    this.isLoading=false
  }
};
</script>

Answer 1

我能想到的最简单的方法是使用

item.<name>

插槽，它提供了可以轻松显示的行索引。对于

<name>

的

item.<name>

部分，只需使用假列名称，例如

item.num

因为它与您的实际项目数据中的任何内容都没有关系

<v-data-table
  :headers="headers"
  :items="products.records"
  :search="search"
  :loading="isLoading"
>
  <template v-slot:item.num="{ index }">
    {{ index + 2 }}
  </template>
</v-data-table>

2 添加到索引中，以便第一行显示“2”，因为根据您的图像，标题应显示“1”。只需使用

text: '1', value: 'num'

:

将另一个对象添加到标头数组即可设置标头值

headers: [
        { text: '1', value: 'num', sortable: false },
        {
          text: "Year",
          align: "start",
          filterable: true,
          value: "fields.year",
        },
        { text: "Item", value: "fields.item" },
        { text: "Element", value: "fields.element" },
        { text: "Value", value: "fields.value" },
        { text: "Unit", value: "fields.unit" },
        { text: "Area Code", value: "fields.area_code" },
        { text: "Area", value: "fields.area" },
      ]

codesandbox如果您想查看代码示例。

Answer 2

您可以在 v-for 中使用以下解决方案：

 <tr v-for="(obj,index) in Object_Name" :key="obj.id">
     <td>
        {{ index+1 }}
     </td>
 </tr>