vuetifyjs:如何在 v-data-table 中创建多行标题?

问题描述

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

I need multi-lines header in this scenario:
the fist line is level 1 header, the second line is level 2, like this pic:

多行标题

谢谢！

推荐答案

核心代码

<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

这篇关于vuetifyjs:如何在 v-data-table 中创建多行标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！