使用vuetifyJS数据表动态构建表

JavaScript Vue.js

L卡卡西米亚

2020-03-18

我有一个带有动态更改列的表。因此，无法以这种方式对表格模板进行硬编码-

<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>

我在响应中得到了这部分的代码。无法弄清楚如何向前交流。

第2182篇《使用vuetifyJS数据表动态构建表》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
神乐小哥猴子 2020.03.18

我在看同一个问题，找到了一种避免对标记中的数据结构进行硬编码的典型方法。您可以使用标头的内容通过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>

阿飞宝儿猴子 2020.03.18

我知道这个问题很旧，但是我遇到了同样的问题，因此偶然发现了该页面。幸运的是，我已经解决了我的问题，方法是编辑Bart给出的代码，使其符合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>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android