Vue.js Vue数据表标题全部显示在一列中

我有一个

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>

{{itm.value}

---

有人能就如何解决此问题提供建议吗？

循环应在

th

元素中完成，并删除div one：

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

{{itm.value}

同意-但如果我不想在某些标题上显示

，该怎么办？这样做会在

v-data-table

中产生较大的间隙？在这种情况下，您可以使用

v-if

进行条件渲染，这不一定要进入

标记内部吗？这意味着它将始终尝试呈现列标题，但不打印内容。v-for循环可以在虚拟元素

模板

中完成，v-if循环可以在th元素中完成，该元素将根据条件呈现。这仍然会创建一个空白

元素？