Javascript 使用vuetifyJS数据表动态构建表

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

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

**{{props.item.name}
{{props.item.carries}
{{props.item.fat}
{{props.item.carbs}
{{props.item.protein}
{{props.item.iron}**

我在回复中得到了这部分的代码。 我想不出如何把它传达出去

我无法回答您的问题，但我假设您希望创建vuetify表

下面是模板：

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

{{props.item.name}
{{props.item.carries}
{{props.item.fat}
{{props.item.carbs}
{{props.item.protein}
{{props.item.iron}

在脚本下面：

 <script>
  export default {
    data () {
      return {
        headers: [
          {
            text: 'Dessert (100g serving)',
            align: 'left',
            sortable: false,
            value: 'name'
          },
          { text: 'Calories', value: 'calories' },
          { text: 'Fat (g)', value: 'fat' },
          { text: 'Carbs (g)', value: 'carbs' },
          { text: 'Protein (g)', value: 'protein' },
          { text: 'Iron (%)', value: 'iron' }
        ],
        items: [
          {
            value: false,
            name: 'Frozen Yogurt',
            calories: 159,
            fat: 6.0,
            carbs: 24,
            protein: 4.0,
            iron: '1%'
          },
          {
            value: false,
            name: 'Ice cream sandwich',
            calories: 237,
            fat: 9.0,
            carbs: 37,
            protein: 4.3,
            iron: '1%'
          },
          {
            value: false,
            name: 'Eclair',
            calories: 262,
            fat: 16.0,
            carbs: 23,
            protein: 6.0,
            iron: '7%'
          },
          {
            value: false,
            name: 'Cupcake',
            calories: 305,
            fat: 3.7,
            carbs: 67,
            protein: 4.3,
            iron: '8%'
          },
          {
            value: false,
            name: 'Gingerbread',
            calories: 356,
            fat: 16.0,
            carbs: 49,
            protein: 3.9,
            iron: '16%'
          },
          {
            value: false,
            name: 'Jelly bean',
            calories: 375,
            fat: 0.0,
            carbs: 94,
            protein: 0.0,
            iron: '0%'
          },
          {
            value: false,
            name: 'Lollipop',
            calories: 392,
            fat: 0.2,
            carbs: 98,
            protein: 0,
            iron: '2%'
          },
          {
            value: false,
            name: 'Honeycomb',
            calories: 408,
            fat: 3.2,
            carbs: 87,
            protein: 6.5,
            iron: '45%'
          },
          {
            value: false,
            name: 'Donut',
            calories: 452,
            fat: 25.0,
            carbs: 51,
            protein: 4.9,
            iron: '22%'
          },
          {
            value: false,
            name: 'KitKat',
            calories: 518,
            fat: 26.0,
            carbs: 65,
            protein: 7,
            iron: '6%'
          }
        ]
      }
    }
  }
</script>

导出默认值{
数据（）{
返回{
标题：[
{
文字：“甜点（100克），
对齐：“左”，
可排序：false，
值：“名称”
},
{文本：'卡路里'，值：'卡路里'}，
{text:'Fat（g'），value:'Fat'}，
{text:'Carbs（g）'，value:'Carbs'}，
{text:'Protein（g'），value:'Protein'}，
{文本：'Iron（%）'，值：'Iron'}
],
项目：[
{
值：false，
名称：“冷冻酸奶”，
卡路里：159，
脂肪：6.0，
碳水化合物：24，
蛋白质：4.0，
铁：“1%”
},
{
值：false，
名称：“冰淇淋三明治”，
卡路里：237，
fat:9.0，
碳水化合物：37，
蛋白质：4.3，
铁：“1%”
},
{
值：false，
名称：“Eclair”，
卡路里：262，
脂肪：16.0，
碳水化合物：23，
蛋白质：6.0，
铁：“7%”
},
{
值：false，
名字：“纸杯蛋糕”，
卡路里：305，
脂肪：3.7，
碳水化合物：67，
蛋白质：4.3，
铁：“8%”
},
{
值：false，
名称：“姜饼”，
卡路里：356，
脂肪：16.0，
碳水化合物：49，
蛋白质：3.9，
铁：16%
},
{
值：false，
名称：“果冻豆”，
卡路里：375，
脂肪：0.0，
碳水化合物：94，
蛋白质：0.0，
铁：“0%”
},
{
值：false，
名称：“棒棒糖”，
卡路里：392，
脂肪：0.2，
碳水化合物：98，
蛋白质：0，
铁：2%
},
{
值：false，
名称：“蜂巢”，
卡路里：408，
fat:3.2，
碳水化合物：87，
蛋白质：6.5，
铁：45%
},
{
值：false，
名称：“甜甜圈”，
卡路里：452，
脂肪：25.0，
碳水化合物：51，
蛋白质：4.9，
铁：22%
},
{
值：false，
名称：“KitKat”，
卡路里：518，
脂肪：26.0，
碳水化合物：65，
蛋白质：7，
铁：“6%”
}
]
}
}
}

这是vuetify的复制粘贴

现在，如果要使用动态标题，只需更改headers属性。

我的建议是，与您的桌子一起使用。 使用表格列填充多个select，并允许用户选择或取消选择。然后在数据表格in:标题中使用对应于多个select的属性

例如，如果mutpiple select绑定到e6（属性名称），那么v-data-table将显示：

---

以下是一些您可以尝试的方法，我知道它是有效的，因为我使用了类似的方法。但要了解这是如何工作的，请阅读vue js中的相关内容

警告：您必须自己配置每一个数据绑定项，这可能会导致无法承受的压力，但如果您有许多数据表，那么这可能是值得的。不要放弃：）

可以使用标题作用域插槽配置标题。有关更多详细信息，请阅读文档。查找作用域插槽选项卡并查看可以配置什么

现在，对于本专栏，您需要使用动态组件进行配置。也就是说，根据数据表列的类型返回组件，例如if text，然后返回

text

，依此类推。我只是为你提出一个想法，你必须按照你想要的方式进行配置

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

向上箭头
{{header.text}}
导出默认值{
数据（）{
返回{
表格项目：[]
}
计算：{
tableHeaders:函数（）{}
tablePagination:functin（）{}
//和其他属性，或者您可以简单地将它们配置为
数据。
},
方法：{
getComponentByColumnType（标题、数据）{
//在此处按列类型返回组件。
}
}
}

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

{{myprops.item[header.value]}

我知道这个问题已经很老了，但我也遇到了同样的问题，我偶然发现了这个页面。幸好我通过编辑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>

{{index[header.value]}

对于未来的搜索者，我设法在codepen中创建了一个示例，用vuetify 2调整表列的大小

代码：

HTML

谢谢

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

<div id="app">

  <v-app id="inspire">
    <v-container>
      <v-row><v-btn @click="add">ADD</v-btn><v-btn @click="remove">REMOVE</v-btn></v-row>
    <v-data-table
      :headers="headers"
      :items="desserts"

    >
      <template v-slot:body="props">
       <tbody>
        <tr v-for="item in props.items">
          <td v-for="(header, index) in headers">
            <span v-if="index">{{ item.cols[index-1] }}</span>
            <span v-else>{{ item.name }}</span>
          </td>
        </tr>
       </tbody>
      </template>
    </v-data-table>


      </v-container>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      index: 0,
      headers: [
        {
          text: 'Name',
          align: 'start',
          sortable: true,
          value: 'name',
        },
        { text: '1', value: 'calories', align: 'start' },
        { text: '2', value: 'fat', align: 'start' },
        { text: '3', value: 'carbs', align: 'start' },
        { text: '4', value: 'protein', align: 'start' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          cols:[0,0,0,0]
        },
        {
          name: 'Ice cream sandwich',
          cols:[0,0,0,0]
        },
        {
          name: 'Eclair',
          cols:[0,0,0,0]
        },
        {
          name: 'Cupcake',
          cols:[0,0,0,0]
        },
        {
          name: 'Gingerbread',
          cols:[0,0,0,0]
        },
        {
          name: 'Jelly bean',
          cols:[0,0,0,0]
        },
        {
          name: 'Donut',
          cols:[0,0,0,0]
        },
        {
          name: 'KitKat',
          cols:[0,0,0,0]
        },
      ],
    }
  },
  mounted(){
    this.index = this.headers.length
  },
  methods:{
    add(){
      this.desserts.forEach(item => { item.cols.push(0) })
      this.headers.push({text:this.index, value:this.index})
      this.index++
    },
    remove(){
      let header = this.headers.pop()
      this.desserts.forEach(item => { item.cols.pop() })
      this.index--
    },

  }
})