使用 vuetifyJS 数据表动态建表 [英] Dynamically building a table using vuetifyJS data table
本文介绍了使用 vuetifyJS 数据表动态建表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含动态变化列的表格.因此，表格的模板不能像这样硬编码 -
<v-数据表:headers="headers":项目=项目"隐藏动作类=海拔-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>**</模板></v-data-table></模板>我在响应中得到了这部分的代码.不知道如何向前传达.
解决方案
我在看同样的问题，找到了一种避免在标记中硬编码数据结构的典型方法；您可以使用标题的内容使用 v-for 循环编写项目模板的脚本，如下所示:
<v-app id="inspire"><v-数据表:headers="headers":items="甜点"隐藏动作类=海拔-1"><template slot="items" slot-scope="myprops"><td v-for="header in headers">{{ myprops.item[header.value] }}</td></模板></v-data-table></v-app>I have a table with dynamically changing columns. because of that, the template for the table can't be hardcoded like this -
<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>
I'm getting the code for this part in the response. can't figure out how to communicate it forward.
解决方案
I was looking at the same question, found a typical way to avoid hardcoding the data structure in the markup; you can use the content of the headers to script the item template using a v-for loop like this:
<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>
这篇关于使用 vuetifyJS 数据表动态建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
