[英]place a vuetify slot outside of its component
我试图将 vuetify v1.5 v-data-table
组件的标题放在数据表组件本身之外。 有谁知道如何实现这一目标? 以下不起作用:
<template>
<div>
<template slot="headers" slot-scope="props">
<th
v-for="header in props.headers"
:key="header.text"
:class="['table-header']">
{{ header.text }}
</th>
</template>
</div>
//some other unrelated code
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="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-data-table
。 在它上面还有另一个只有标题的v-data-table
。
看看它是如何在codepen 中工作的 - v-data-tables
// v-data-table - with items
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="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>
// v-data-table - just headers
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
hide-actions
></v-data-table>
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' }
],
desserts: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
iron: '1%'
},
],
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.