Vue.js 为什么vuetify数据表组多次显示同一组？

我使用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"
    >

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

---

这似乎是由于

禁用排序造成的。您可以通过在代码笔中打开来尝试-如果添加禁用排序，它将中断

已经有一个in-Vuetify repo，但很难说这是一个bug还是预期行为，因为没有任何维护人员对此发表评论

解决方法是不使用
禁用排序
，而是在每个标题定义（已测试）上设置
可排序：false

另一种解决方法是，按照要传递到
groupby
中的同一列对数据进行预排序，因为groupby逻辑显然（在逻辑上）希望按分组列对行进行排序。但是，如果您想允许用户通过使用
show group by
prop（也经过测试）来切换分组，这当然就不太实际了。
非常感谢您的详细回复。它完全按照你提到的方式工作。但当我使用“：server items length”道具时，它再次中断。您能给我一些建议吗？如果您使用的是
server items length
prop，那么数据已经从后端排序了。因此，我想要按预期进行分组，您的后端应该首先按
groupby
列对数据进行排序，然后按任何
sort by
列对数据进行排序……再次感谢。你完全正确。酷！不客气。