时间戳

首页 > 解决方案 > 如何设置 v-data-table 组顺序？

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

问题描述

默认情况下，该group-by属性启动的组按字母顺序排序，但我只是希望它保持原始顺序或手动设置。如何配置v-data-table组顺序？

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

标签： vue.jsvuetify.js

解决方案

根据文档，它似乎不支持根据您的需要对类别进行排序。然而，@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>

出来很干净！

推荐阅读