我想创建一个带有多行标题的表,例如this example。
我找到了this post,但是答案不起作用。此外,我研究了Vuetify文档和Github问题,但似乎没有解决方案。
如果有人能让我知道这样的事情是否可行以及如何实现,那将是很棒的事情。
答案 0 :(得分:3)
事实证明,只要在广告位模板中添加import turtle
generations = 3
size = 10
rule = ("F", "FF+[+F-F-F]-[-F+F+F]")
sentence = "F"
positions = []
gen = turtle.Turtle()
gen.speed(10)
gen.left(90)
for i in range(generations):
sentence = sentence.replace(*rule)
for op in sentence:
if op == "F":
gen.forward(size)
elif op == "+":
gen.right(size)
elif op == "-":
gen.left(size)
elif op == "[":
positions.append(gen.position())
elif op == "]":
gen.setposition(positions.pop())
turtle.exitonclick()
,您就可以在默认标题上方简单地实现自己的类别行。省略<thead>
放在下面。
<thead>
答案 1 :(得分:1)
您可能可以使用slot =“ headerCell”。请注意,此处使用的Vuetify版本为1.5.11
以下示例可能会为您提供一些提示:
<activationSpec id="app1/module1/MyMessageDrivenBean">
这是codepen链接:https://codepen.io/nizantz/pen/KYyLOp
希望对您有帮助。
(要提醒主持人,他删除了我以前的帖子:我不小心将答案贴错了一个问题,而我已经将其删除了。)
答案 2 :(得分:0)
根据您的评论,这是另一个可以帮助您解决问题的示例 请注意,数据结构必须采用正确的格式。(子元素)
Vue模板:
<div id="app">
<v-data-table
:headers="headersTop"
:items="tableitems"
hide-actions
>
<template slot="items" scope="props">
<td>
<v-data-table
:headers="[{text:'First Name', value:'fname', sortable:false},
{text:'Last Name', value:'lname', sortable:false}
]"
:items="props.item.name"
hide-actions
>
<template slot="items" scope="props">
<td>{{props.item.fname}}</td>
<td>{{props.item.lname}}</td>
</template>
</v-data-table>
</td>
<td>
<v-data-table
:headers="[{text:'Country', value:'country', sortable:false},
{text:'City', value:'city', sortable:false}
]"
:items="props.item.geo"
hide-actions
>
<template slot="items" scope="props">
<td>{{props.item.country}}</td>
<td>{{props.item.city}}</td>
</template>
</v-data-table>
</td>
</template>
</v-data-table>
</div>
脚本:
new Vue({
el: '#app',
data () {
return {
pagination: {},
headersTop:[
{
text: 'Name',
value: 'name',
sortable: false,
},
{
text: 'Geo',
value: 'geo',
sortable: false,
}
],
tableitems:[{
name: [{
fname: 'Dakota',
lname: 'Rice'
},
{
fname: 'Minerva',
lname: 'Hooper'
}],
geo: [{
country: 'Niger',
city: 'Oud-Tunrhout',
},
{
country: 'Curaçao',
city: 'Sinaai-Waas',
}]
}]
}
}
})
这是codepen链接:https://codepen.io/nizantz/pen/rbpNrY
答案 3 :(得分:0)
<v-data-table :headers="surgeryInformationHeaders" :items="surgeryInformationDesserts" hide-default-footer class="transparent elevation-0 my-4" hide-default-header disable-pagination disable-sort :items-per-page="5">
<template #header="{ }">
<thead class="v-data-table-header">
<tr>
<th v-for="(h,i) in surgeryInformationHeaders" :key="i" class="text-center parent-header td-border-style" :rowspan="h.children?1:2" :colspan="h.children?h.children.length:1">
{{ h.text }}
</th>
</tr>
<tr>
<th v-for="(h1,i1) in getSubHeader(surgeryInformationHeaders)" :key="i1" class="text-center child-header td-border-style">
{{ h1.text }}
</th>
</tr>
</thead>
</template>
<template #item="props">
<tr>
<td v-for="(c,ci) in getRows(props.item)" :key="ci">
{{ c }}
</td>
</tr>
</template>
</v-data-table>