如何设置v-data-table组顺序？

Question

默认情况下，由

group-by

属性发起的组按字母顺序排序，但我只是希望它保持原始顺序或手动设置。如何配置

v-data-table

群组顺序？

<v-data-table
    :headers="headers"
    :items="questions"
    :item-class="rowClass"
    :group-by="'group'"
    disable-pagination
    hide-default-footer
>

Answer 1

根据docs，它似乎不支持根据您的需求对类别进行排序。然而@DevonDahon 走在正确的轨道上，并帮助我根据需要对分组内容进行排序。

但是，如果您在这里，还阅读，其中一个答案向您展示了如何设置类别的样式。

只是为了向您介绍我如何使其发挥作用：

1. 获取数据（这里我存储在名为

   notificationTypes

的数据属性中

notificationCategoryOrder: [
  "All Notifications",
  "Request",
  "Order",
  "Inventory",
  "Spend Code",
];


this.notificationTypes = resp.data.data.map((notification) => ({
  ...notification,
  position: this.notificationCategoryOrder.indexOf(notification.category),
}));

然后在

v-data-table

中使用它，例如：

<v-data-table
  :headers="headers"
  hide-default-footer
  :items="notificationTypes"
  disable-pagination
  dense
  group-by="position"
>
                <template #group.header="{ group, headers, toggle, isOpen }">
                    <td :colspan="headers.length">
                        <v-btn @click="toggle" x-small icon :ref="group">
                            <v-icon v-if="isOpen">mdi-plus</v-icon>
                            <v-icon v-else>mdi-minus</v-icon>
                        </v-btn>
                        <span class="mx-5 font-weight-bold">{{
                            notificationCategoryOrder[group]
                        }}</span>
                    </td>
                </template>
  </v-data-table>

出来很干净！

Answer 2

在 v-data-table 中添加

:group-desc="sortDescending"

<v-data-table
    :headers="headers"
    :items="questions"
    :item-class="rowClass"
    :group-by="'group'"
    disable-pagination
    hide-default-footer
    :group-desc="sortDescending"
>

为

sortDescending

添加数据属性

data(){
  return {
    sortDescending: true, // true is to make the group by descending active 
  }
}