vuetify数据表组为什么会多次显示同一个组？答案

【问题标题】：Why does vuetify data table group show the same group more than once?vuetify数据表组为什么会多次显示同一个组？
【发布时间】：2021-04-12 13:05:43
【问题描述】：

我使用 vuetify 创建了一个数据表，并尝试将其与一个名为 "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"
    >

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

【问题讨论】：

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

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

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

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

其他解决方法是通过您传递给group-by 的同一列自行对数据进行预排序，因为分组逻辑显然（并且在逻辑上）期望行按分组列排序。但是，如果您想允许用户使用show-group-by prop 切换分组，这当然不太实用（也经过测试）

【讨论】：

非常感谢您的详细回复。它完全按照您提到的方式工作。但是当我使用 ":server-items-length" 道具时它再次中断。你能给我一些建议吗？
如果你使用server-items-length 属性，Vuetify expects 数据已经从后端排序。所以我想按预期对工作进行分组，您的后端应该首先按group-by 列对数据进行排序，然后按任何sort-by 列...
再次非常感谢。你是绝对正确的。