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>
応答でこの部分のコードを取得しています。それを前に伝える方法がわかりません。
私は同じ質問を見て、マークアップのデータ構造をハードコーディングすることを避ける典型的な方法を見つけました。次のような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>ここにあなたが試すことができるものがあります、私は私が同様のアプローチを使用したのでそれが機能することを知っています。しかし、これがどのように機能するかを理解するには、 動的コンポーネント in vue js。
警告：すべてのデータバインドアイテムを自分で設定する必要があり、圧倒される可能性がありますが、多くのデータテーブルがある場合は価値があります。 あきらめない:)
ヘッダーはheaders scoped-slotを使用して設定できます。詳細についてはドキュメントを参照してください こちら 。スコープスロットタブを探して、構成可能なものを確認します。
次に、動的コンポーネントを使用して構成する列について説明します。つまり、データテーブルの列の型に基づいてコンポーネントを返します。たとえば、テキストが<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.
}
}
}
私はあなたの質問を得ることができませんが、私はあなたが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>
スクリプトの下：
<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>
これはvuetifyからのコピーペーストです docs
動的ヘッダーを使用する場合は、ヘッダープロパティを変更するだけです
私の推奨事項は、テーブルで vuetify multiple select を使用することです。 複数選択にテーブル列を入力し、ユーザーが選択または選択解除できるようにします。その後、：headersのデータテーブルで、複数選択に対応するプロパティを使用します
たとえば、複数選択がe6（プロパティの名前）にバインドされている場合、v-data-tableは次のようになります：
<v-data-table
:headers="e6" /*this changed*/
:items="items"
hide-actions
class="elevation-1"
>
私はこの質問が古いことを知っていますが、私は同じ問題を抱えていて、このページを偶然見つけました。ありがたいことに、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>