如何编辑Vuetify <v-data-table>的组标头？

Question

如何编辑group-by <v-data-table>的标头？

我需要隐藏交叉和设置一个自定义标题。

<v-data-table
    :headers="headers"
    :items="items"
    group-by="category"
></v-data-table>

Answer 1

您只需覆盖默认的group.header插槽即可。

<v-data-table
    :headers="headers"
    :items="items"
    group-by="category"
>
  <template v-slot:group.header="{items, isOpen, toggle}">
    <td :colspan="headers.length">
      <v-icon @click="toggle">
        {{ isOpen ? 'mdi-minus' : 'mdi-plus' }}
      </v-icon>
      <span>Your custom header w/o cross</span>
    </td>
  </template>
</v-data-table>

选中“插槽”类别中的辩证法，以获得此插槽中可用的道具的完整列表。