Vue 数据 Table Headers 全部出现在一列中

Question

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

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

有人可以就如何解决这个问题提出建议吗？

Answer 1

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

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

Vue 数据 Table Headers 全部出现在一列中

Vue Data Table Headers All Appearing in One Column

vue.js

vuetify.js

v-data-table