时间戳

首页 > 解决方案 > Vuetify 动态加载数据表行

vue.js - Vuetify 动态加载数据表行

问题描述

我有一个像这样的 vuetify 数据表

<v-data-table :items="items" :headers="headers" :search="search">
            <template slot="items" slot-scope="props">
              <td>{{props.item.id}}</td>
              <td>{{props.item.make}}</td>
              <td>{{props.item.year}}</td>

            </template>
          </v-data-table>

而不是这个，我想要的是使用 v-for 加载这些 td 元素

我试过了

<td v-for="i in headers" :key="i">{{props.item.i.text}}</td>

我如何在 vuetify 中做到这一点。我的 vuetify 版本也是 1.5.5

这是我的代码笔 https://codepen.io/pathum-kalhan/pen/ZEzMEQG

标签： vue.jsvuejs2vuetify.js

解决方案

<template slot="items" slot-scope="props">
   <td v-for="(prop, key) of props.item" :key="key" :v-text="prop" />
</template>

...有效（目前）。注意代替
的用法。for...offor...in

但这将为<td>您的项目的每个属性输出一个。这意味着如果您的任何一个项目获得了附加属性（拥有或继承），它将破坏表格布局。

一种更安全的方法是使用辅助扩展方法来强制输出对象的结构：

methods: {
  spreadItem(item) {
    const { id, make, year } = item;
    return { id, make, year };
  }
}

并且，在模板中：

<template slot="items" slot-scope="props">
   <td v-for="(prop, key) of spreadItem(props.item)" 
       :key="key"
       :v-text="prop" />
</template>

更新了笔。当一些项目具有额外的道具时，这不会添加额外的单元格（除非您将它们添加到spreadItem方法和headers，当然，在这种情况下它们将显示为额外的列）。

推荐阅读