在 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 接受对象数组作为道具而不是数组数组，但是您的用例可以使用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>