使用vuetifyJS数据表动态建表

Question

我有一个列动态变化的表。正因为如此，表的模板不能像这样硬编码-

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    hide-actions
    class="elevation-1"
  >
    <template slot="items" slot-scope="props">
      **<td>{{ props.item.name }}</td>
      <td class="text-xs-right">{{ props.item.calories }}</td>
      <td class="text-xs-right">{{ props.item.fat }}</td>
      <td class="text-xs-right">{{ props.item.carbs }}</td>
      <td class="text-xs-right">{{ props.item.protein }}</td>
      <td class="text-xs-right">{{ props.item.iron }}</td>**
    </template>
  </v-data-table>
</template>

我正在获取响应中这部分的代码。我不知道该怎么跟他们交流。

Answer 1

我正在研究同样的问题，找到了一种典型的方法来避免在标记中硬编码数据结构；您可以使用标题的内容来使用v-for循环编写项模板的脚本，如下所示：

​

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :headers="headers"
      :items="desserts"
      hide-actions
      class="elevation-1"
    >
      <template slot="items" slot-scope="myprops">
        <td v-for="header in headers">
        {{ myprops.item[header.value] }}
        </td>
      </template>
    </v-data-table>
  </v-app>
</div>

​

Answer 2

我知道这个问题很老，但我也遇到了同样的问题，我偶然发现了这一页。谢天谢地，我已经通过编辑给出的代码来满足Vue 2中的最新语法，从而解决了我的问题。

<v-data-table :headers="headers"
 :items="myDataObject"
 class="elevation-24">
    <template v-slot:body="props">
      <tr v-for="index in props.items">
        <td v-for="header in headers" class="text-left font-weight-black">
          {{ index[header.value]}}
        </td>
      </tr>
    </template>
</v-data-table>

Answer 3

这里有一些你可以尝试的东西，我知道它是有效的，因为我使用了类似的方法。但要理解它是如何工作的，请阅读vue js中的dynamic components。

警告:你必须自己配置每个单独的数据绑定项，这可能会让人不知所措，但如果你有很多数据表，这可能是值得的。不要放弃:)

可以使用headers scoped slot配置标头。有关更多详细信息，请阅读文档here。查找范围插槽选项卡，查看您可以配置的内容。

现在，对于列，您需要使用动态组件进行配置。也就是说，根据数据表列的类型返回组件，比如如果text返回<td>text</td>，依此类推。我只是简单地为你列出了一个想法，你必须按照你想要的方式进行配置。

<v-data-table
  v-model="tableRowsSelected" 
  :items="tableItems"
  :headers="tableHeaders"
  :pagination.sync="tablePagination" 
  :rows-per-page-items="tablePaginationDropdown"
  item-key="name" 
  class="elevation-1"
> 
   <template v-if="tableHeaders" slot="headers" slot-scope="row">
    <tr>
      <th
        v-for="header in row.headers"
        :key="header.text"
        :class="['column sortable', tablePagination.descending ? 'desc' : 'asc', header.value === tablePagination.sortBy ? 'active' : '']"
        @click="changeSort(header.value)"
      >
        <v-icon small>arrow_upward</v-icon>
        {{ header.text }}
      </th>
    </tr>
  </template>
  <template template slot="items" slot-scope="row">
      <tr>
        <component v-for="header in Object.keys(row.item)" :key="header" :is="getComponentByColumnType(header, row.item)"></component>
      </tr>
  </template>

export default {
data () {
 return {
        tableItems: []
 }
 computed: {
  tableHeaders: function () { }
  tablePagination: functin() {}
  // and other properties here or you could simply configure them as part of 
  data.
  },
  method:{
    getComponentByColumnType(header, data) {
     // return the component per your column type here.
    }
  }
}