为什么 vuetify data table 组不止一次显示同一个组？

Question

我用 vuetify 创建了一个数据 table 并尝试将它与一个名为 "unit" 的字段分组，如下所示：

<v-data-table
      :loading="loading"
      :headers="headers"
      :items="modifiedChapters"
      item-key="id"
      class="elevation-1"
      disable-sort
      group-by="unit"
      :page.sync="chaptersInput.pageNo"
      :items-per-page="chaptersInput.limit"
      :server-items-length="totalCount"
      @update:options="onUpdatePagination"
    >

代码的输出有点奇怪。它使用相同的名称多次对项目进行分组。为了更好地理解，我在下面添加了一张照片。在这里，您可以看到单元“简介”和“单元一”都不止一次地分组。我该如何解决这个问题？

Answer 1

这似乎是由 disable-sort 引起的。您可以通过在代码笔中打开 Grouping example 来尝试 - 如果您添加 disable-sort 它将中断...

Vuetify 存储库中已经有一个 issue，但很难说它是错误还是预期行为，因为没有维护者对此发表评论...

解决方法是不使用 disable-sort 而是在每个 header 定义上设置 sortable: false（已测试）

其他解决方法是 pre-sort 您自己的数据通过您传递到 group-by 的同一列作为 group-by 逻辑显然（并且逻辑上）期望行排序分组列。但是，如果你想让用户使用 show-group-by 属性（也经过测试）

来切换分组，这当然不太实用

为什么 vuetify data table 组不止一次显示同一个组？

Why does vuetify data table group show the same group more than once?

vue.js

nuxt.js

vuetify.js