Question

在这种情况下，我需要多行标题：
第一行是1级标题，第二行是2级标题，例如：

谢谢！

Answer 1

核心代码

<v-data-table :headers="surgeryInformationHeaders" :items="surgeryInformationDesserts" hide-default-footer class="transparent elevation-0 my-4" hide-default-header disable-pagination disable-sort :items-per-page="5">
      <template #header="{ }">
        <thead class="v-data-table-header">
          <tr>
            <th v-for="(h,i) in surgeryInformationHeaders" :key="i" class="text-center parent-header td-border-style" :rowspan="h.children?1:2" :colspan="h.children?h.children.length:1">
              {{ h.text }}
            </th>
          </tr>
          <tr>
            <th v-for="(h1,i1) in getSubHeader(surgeryInformationHeaders)" :key="i1" class="text-center child-header td-border-style">
              {{ h1.text }}
            </th>
          </tr>
        </thead>
      </template>
      <template #item="props">
        <tr>
          <td v-for="(c,ci) in getRows(props.item)" :key="ci">
            {{ c }}
          </td>
        </tr>
      </template>
    </v-data-table>

此处是代码开放链接https://codepen.io/sunhao1256/pen/MWeZyMe

Answer 2

通过在标题中添加子项，可以在v-data表中实现多行标题。

 headers: [
   {
     text: 'Film Title',
     align: 'center',
     sortable: false,
     value: 'film',
   },
   { text: 2018, value: 'dec', sortable: false, align: 'center',child:["December"] },
   { text: 2019, value: 'jan',  sortable: false, align: 'center',child:["January","February"]  }
 ],

您可以访问此链接以获取示例输出： https://codepen.io/nicemid/pen/ZwXmeq

vuetifyjs：如何在v-data-table中创建多行标题？

2 个答案: