TA貢獻1821條經驗 獲得超6個贊
沒有內置的方法來執行此操作，但是您可以通過添加計算屬性并使用方法向每個項目添加新屬性來實現它，例如 ，它代表序列號。您可以根據需要重命名它。.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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
舉報