在 v-data-table 中使用标题槽时添加了空标题行

Question

在 vuetify2 的 v-data-table 中使用标头槽时添加了空行

这是代码笔： https://codepen.io/satishvarada/pen/rNBjMjE?editors=1010

Vue.component('pivot-table',{
data:()=>({
pivotData:[["2018",1470,1436,1445,0],["2019",1953,1824,0,0]],
pivotHeaders:[[{"value":"Month","colspan":1},{"value":"JAN","colspan":2},{"value":"FEB","colspan":2}],[{"value":"Year","colspan":1},{"value":"Count1","colspan":1},{"value":"Count2","colspan":1},{"value":"Count1","colspan":1},{"value":"Count2","colspan":1}]],
}),
template:
`<v-data-table disable-sort disable-filtering :headers="pivotHeaders" :items="pivotData">
<template v-slot:header="{ props: { headers } }"><thead class="v-data-table-header">
<tr v-for="header in headers" style="background-color:yellow;"> 
<th v-for="head in header" :colspan="head.colspan">{{head.value}}</th>
</tr></thead>
</template>
<template v-slot:body="{ items }">
<tbody>
<tr v-for="item_row in items"><template v-for="item in item_row">
<td>{{ item }}</td></template>
</tr></tbody></template></v-data-table>`
})

标题下方添加了意外的行。此空行中的单元格数与标题中存在的行数相同。

Answer 1

我认为这个问题与您的数据结构有关，因为v-data-table接受对象数组作为 props 而不是数组数组，但您的用例可以使用v-simple-table组件实现如下：

<v-simple-table>
<thead>
<tr v-for="header in pivotHeaders" style="background-color:yellow;">
<th v-for="head in header" :colspan="head.colspan">{{head.value}}
</th>
</tr>
</thead>

<tbody>
<tr v-for="item_row in pivotData">
<td v-for="item in item_row">{{ item }}</td>
</tr>
</tbody>
</v-simple-table>