Vue Js：如何在 Vue 数据表组件中添加序列号列

Question

我正在使用组件在我的应用中显示数据表。有没有办法在此数据表中添加序列号列。从1到我的文章数组的长度开始。<v-data-table>如果任何带有任何id的文章首先出现，它应该从1开始。

Answer 1

没有内置的方法来执行此操作，但是您可以通过添加计算属性并使用方法向每个项目添加新属性来实现它，例如 ，它代表序列号。您可以根据需要重命名它。.map()sno

computed: {

   itemsWithSno() {

      return this.desserts.map((d, index) => ({ ...d, sno: index + 1 }))

   }

},

接下来，只需在标头数组中添加一个新列即可映射此新属性，如下所示：

{

   text: 'Serial #',

   value: 'sno'

},

此处的值需要与在计算属性中添加的新属性名称完全相同。sno

接下来，只需更新 prop 以使用计算属性，而不是原始数组，如下所示：v-data-tableitemsitemsWithSno

<v-data-table :headers="headers" :items="itemsWithSno">

</v-data-table>

就是这样。

工作演示：

new Vue({

  el: '#app',

  vuetify: new Vuetify(),

  computed: {

    itemsWithSno() {

      return this.desserts.map((d, index) => ({ ...d, sno: index + 1 }))

    }

  },

  data() {

    return {

      headers: [{

          text: 'Serial #',

          value: 'sno'

        },

        {

          text: 'Dessert (100g serving)',

          align: 'start',

          sortable: false,

          value: 'name',

        },

        {

          text: 'Calories',

          value: 'calories'

        },

        {

          text: 'Fat (g)',

          value: 'fat'

        }

      ],

      desserts: [{

          name: 'Frozen Yogurt',

          calories: 159,

          fat: 6.0

        },

        {

          name: 'Ice cream sandwich',

          calories: 237,

          fat: 9.0

        },

        {

          name: 'Eclair',

          calories: 262,

          fat: 16.0

        },

        {

          name: 'Cupcake',

          calories: 305,

          fat: 3.7

        },

        {

          name: 'Gingerbread',

          calories: 356,

          fat: 16.0

        }

      ],

    }

  },

})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">

  <v-app>

    <v-main>

      <v-container>

        <v-data-table :headers="headers" :items="itemsWithSno" class="elevation-1">

        </v-data-table>

      </v-container>

    </v-main>

  </v-app>

</div>