vue.js - 如何将 dataTable 迭代到 vutify 中？

Question

我想在 vuetify 板上迭代我的安排，但我还没有找到逻辑，因为我从 vue 开始，如果有人能给我一个如何迭代 vutify 板的例子，那就完美了

例子 ：

 <article class="artkccle-item" v-for="person in persons" :key="person.id">
  <v-data-table :headers="headers"  :items-per-page="5" class="elevation-1">
    <v-item>{{person.id}}</v-item>

  </v-data-table>
</article>

人是我的阵列

标签： vue.jsvue-componentvuetify.js

Answer 1

就像文档说的那样，您必须提供表格标题描述和表格内容。

标头的描述必须是这样的对象：

headers: [
  {
    text: 'Dessert (100g serving)',
    align: 'left',
    sortable: false,
    value: 'name',
  },
  ...
]

value 键是最重要的，因为它将在每个行项目中选择用于显示的键。

提供标题后，提供您的数据：

{
   name: 'Frozen Yogurt',
   calories: 159,
   fat: 6.0,
   carbs: 24,
   protein: 4.0,
   iron: '1%',
}

使用上面提供的标题，表格将只有一列，一行只有数据“Frozen Yogurt”（从对象的“name”键中选择）。

有关信息，您可以使用“<>”图标查看每个 vuetify-doc 示例的代码详细信息，您将看到一个完整的示例。

https://vuetifyjs.com/en/components/data-tables