Javascript 使用 vuetifyJS 数据表动态建表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49607082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically building a table using vuetifyJS data table
提问by moran tal
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.
我在响应中得到了这部分的代码。无法弄清楚如何向前传达它。
回答by Bart Adriaanse
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:
我在看同样的问题，找到了一种避免在标记中硬编码数据结构的典型方法；您可以使用标题的内容使用 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>回答by Jaya
Here is something you can try, i know it works as i have used a similar approach. But to understand how this works, read about dynamic componentsin vue js.
这是您可以尝试的方法，我知道它有效，因为我使用了类似的方法。但是要了解这是如何工作的，请阅读vue js 中的动态组件。
Warning: You have to configure every single data bound item yourself and it can be overwhelming, but if you have many data table it may be worth it. dont give up:)
警告：您必须自己配置每个数据绑定项，这可能会让人不知所措，但如果您有很多数据表，这可能是值得的。不要放弃:)
The headers can be configured using the headers scoped-slot. Read the documentation for more details here. Look for the scoped slots tab and see what you could configure.
可以使用标头 scoped-slot配置标头。在此处阅读文档以了解更多详细信息。查找范围插槽选项卡并查看您可以配置的内容。
And now for the column you got to configure using dynamic components. That said, return the component based on the type of the data table column, say if text then return <td>text</td>and so on. Am simply laying out an idea for you and you got to configure the way you want to.
现在对于您必须使用动态组件配置的列。也就是说，根据数据表列的类型返回组件，比如如果文本然后返回<td>text</td>等等。我只是为您提出一个想法，您必须按照自己的方式进行配置。
<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.
}
}
}
回答by Suleman
I know this question is old but I have been having same problem and I stumbled across this page. Thankfully I have solved my issueby editing the code given by Bart to meet the latest syntax in Vue 2.
我知道这个问题很老，但我遇到了同样的问题，我偶然发现了这个页面。谢天谢地，我通过编辑 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>
回答by roli roli
I cannot get your question but i am assuming that you want to create a vuetify table.
我无法回答您的问题，但我假设您想创建一个 vuetify 表。
So below is the template:
所以下面是模板：
<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>
and below the script:
并在脚本下方：
<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>
This is copy paste from vuetify docs
这是 vuetify文档中的复制粘贴
Now if you want to use dynamic headers just change the headers property.
现在，如果您想使用动态标头，只需更改标头属性即可。
My recommendation is,to use vuetify multiple selectwith your table. Populate the multiple select with table columns and let the user to select or deselect.Then in data-table in :headers use the property which correspond to multiple select
我的建议是，对您的表使用vuetify 多选。 用表列填充多选，让用户选择或取消选择。然后在数据表中：headers 使用对应于多选的属性
For example if mutpiple select is binded to e6(name of property), then the v-data-table will look:
例如，如果 mutpiple select 绑定到 e6（属性名称），则 v-data-table 将如下所示：
<v-data-table
:headers="e6" /*this changed*/
:items="items"
hide-actions
class="elevation-1"
>
