javascript - 如何重命名 vuetify 数据表组标签？

Question

我想更改 vuetify 数据表的组标签。对于下面的 Vuetify 早期版本，代码工作正常，但现在不起作用。

<va-data-table-server
  :items-per-page="50"
  :group-by="groupBy"
  row-create
  row-clone
  row-edit
  disable-edit
  disable-show
  disable-clone
  disable-create-redirect
>
  <template v-slot:column.data-table-group>
  </template>
</va-data-table-server>

这是演示链接。

https://play.vuetifyjs.com/#eNq9lt9vmzAQx

Answer 1

使用header插槽

You can use the dynamic slots header.<key> to customize only certain columns. <key> corresponds to the key property in the items found in the headers prop.

“Group” header 的键是 data-table-group (通过首先使用 headers 插槽并将所有列数据打印到 UI: seen here 找到)，因此您需要使用的实际插槽是 header.data-table-group

<template v-slot:header.data-table-group>
  <div>custom</div>
</template>

Vuetify Playground