Vue 数据表标题全部出现在一列中

【问题标题】：Vue Data Table Headers All Appearing in One ColumnVue 数据表标题全部出现在一列中
【发布时间】：2021-06-12 12:08:51
【问题描述】：

我有一个v-data-table，我正在尝试打印我的标题，但在我的代码中，它们都出现在一个列中，而不是在整个表格中。

<template v-slot:header>
    <thead>
        <tr>
            <div v-for="(itm, i) in hdrs" :key="i">
              <th>
                {{itm.value}}
              </th>
            </div>
        </tr>
    </thead>
</template>

谁能提供关于如何解决此问题的建议？

【问题讨论】：

标签： vue.js vuetify.js v-data-table

【解决方案1】：

循环应该在 th 元素中完成并删除 div 之一：

<tr>
  <tempalte v-for="(itm, i) in hdrs">
     <th v-if="someCondition">
      {{itm.value}}
     </th>
  </template>
</tr>

【讨论】：

同意 - 但如果我不想在某些标题上显示 <th> </th> 怎么办？这样做会在v-data-table 中产生很大的空白？
你可以使用v-if进行条件渲染
在这种情况下，这不是必须进入<th> 标签内吗？这意味着它将始终尝试呈现列标题，但不打印内容。
v-for 循环可以在虚拟元素template 中完成，v-if 可以在将根据条件呈现的第 th 元素中完成
这仍然会创建一个空白的<th> </th> 元素？