Vuetify 动态加载数据表行答案

【问题标题】：Vuetify dynamically load data table rowsVuetify 动态加载数据表行
【发布时间】：2019-09-16 15:55:26
【问题描述】：

我有一个像这样的 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.js vuejs2 vuetify.js

【解决方案1】：

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

...有效（目前）。
注意使用for...of 而不是for...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>

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

【讨论】：

【解决方案2】：

试试下面的模板：

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-data-table :items="items" :headers="headers" :search="search">
            <template slot="items" slot-scope="props">
              <template v-for"column in headers">
                <td>{{ column.text }}</td>
              </template>
            </template>
          </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>

【讨论】：

【解决方案3】：

您可以在v-for 中使用Object.keys()，如下所示

<td v-for="(key,index) in Object.keys(props.item)" :key="index">{{props.item[key]}}</td>

请检查以下代码 sn-p:

new Vue({
  el: '#app',
  data: () => ({
    items: [{id:1,make:'bmw',year:2019},{id:2,make:'benz',year:2019}],
      headers: [
        { text: 'Id', value: 'id' },

        { text: 'Make', value: 'make' },
        { text: 'Year', value: 'year' }],
    search:""
        
  })
})

td {
  border-bottom: 1px solid #ccc;
}

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <v-data-table :items="items" :headers="headers" :search="search">
            <template slot="items" slot-scope="props">
              <td v-for="(key,index) in Object.keys(props.item)" :key="index">{{props.item[key]}}</td>
            </template>
          </v-data-table>
      </v-container>
    </v-content>
  </v-app>
</div>

【讨论】：