Vuetify3.xVDataTable多排序方法

Vuetify 3.x 的 `v-data-table` 组件在处理复杂数据表格排序时，面临着 `custom-sort` 被 `custom-key-sort` 替代的挑战。本文针对这一变化，深入探讨如何在 Vuetify 3.x 中实现多字段排序，尤其是在主排序字段值相同时，如何依据次要字段进行进一步排序。我们将详细介绍如何巧妙地结合使用 `v-data-table` 的 `:sort-by` 属性和 `@update:sortBy` 事件，动态构建排序规则，从而实现自定义的多字段排序逻辑。通过示例代码，清晰展示如何处理用户点击列头触发的排序事件，并根据业务需求灵活调整排序优先级，为前端开发者提供实用的 Vuetify 数据表多字段排序解决方案。

在 Vuetify 3.x 中，原有的 `custom-sort` 属性被 `custom-key-sort` 替代，导致直接实现基于多个字段的复杂排序变得困难。本文将详细介绍如何利用 `v-data-table` 的 `sort-by` 属性和 `update:sortBy` 事件，巧妙地实现数据表的自定义多字段排序逻辑，尤其适用于当主排序字段相同时，需要依据次要字段进行进一步排序的场景。

Vuetify 数据表多字段排序实现

在前端应用中，数据表格的排序功能是不可或缺的。特别是在处理复杂数据时，用户可能需要根据一个字段进行排序，当该字段值相同时，再根据另一个或多个字段进行二次排序。Vuetify 框架提供了强大的 v-data-table 组件来展示和管理数据，但其在不同版本间处理自定义排序的方式有所演变。

Vuetify 2.x 的 custom-sort

在 Vuetify 2.x 中，v-data-table 提供了 custom-sort 属性，允许开发者传入一个自定义的排序函数。这个函数能够访问到所有待排序的 items 以及当前的 sortBy 和 sortDesc 状态，从而可以灵活地实现多字段排序逻辑。

例如，以下代码展示了如何在 Vuetify 2.x 中实现当按“姓名”排序时，如果姓名相同则按“年龄”排序的逻辑：

Vuetify 3.x 的挑战与 custom-key-sort

进入 Vuetify 3.x，custom-sort 属性被 custom-key-sort 取代。custom-key-sort 允许为每个列键定义一个独立的排序函数。然而，这些独立的排序函数通常只接收当前列的值进行比较，而无法直接访问到整个行对象或其它列的值，这使得在 custom-key-sort 内部实现多字段排序变得困难。

上述代码中，name 排序函数内部无法直接获取 age 字段，因此无法在此处实现姓名相同后按年龄排序的逻辑。

Vuetify 3.x 多字段排序的解决方案

尽管 custom-key-sort 不适合多字段排序，Vuetify 3.x 提供了另一种灵活的机制来实现这一需求：结合使用 v-data-table 的 :sort-by 属性和 @update:sortBy 事件。

核心思路：

1. sort-by 属性： v-data-table 通过 sort-by 属性接收一个数组，数组中的每个对象定义了一个排序规则 { key: string, order: 'asc' | 'desc' }。这个数组的顺序决定了排序的优先级。
2. @update:sortBy 事件： 当用户点击数据表的列头时，v-data-table 会触发 update:sortBy 事件。这个事件会传递一个数组，其中包含用户当前点击的列的排序信息。我们可以在这个事件监听器中，根据用户点击的列，动态地构建并更新 sort-by 属性的值，从而实现多字段排序。

示例代码

以下是一个完整的 Vuetify 3.x 组件示例，演示了如何实现当点击“姓名”列进行排序时，如果姓名相同则按“年龄”升序排序的逻辑。

代码解析

1. data() 中的 sortBy：

   sortBy: [], // 初始化 sortBy 为空数组

   sortBy 是一个响应式数据属性，它将绑定到 v-data-table 的 :sort-by prop。当 sortBy 数组发生变化时，v-data-table 会自动根据新的排序规则重新渲染数据。

2. v-data-table 绑定：

   :sort-by="sortBy"
   @update:sortBy="handleSortChange"

   v-data-table 组件通过 sort-by prop 读取当前的排序状态，并通过 update:sortBy 事件通知父组件用户进行了排序操作。

3. handleSortChange(evt) 方法： 这是实现多字段排序的核心逻辑所在。

   • 取消排序：

     if (!evt.length || evt.length < this.sortBy.length) {
       this.sortBy = [];
       return;
     }

     当用户反复点击同一列头时，Vuetify 可能会在升序、降序、取消排序之间切换。evt 数组的长度变化可以帮助我们判断是否用户意图取消排序。如果 evt 为空或长度变短，通常意味着用户取消了当前的排序，此时我们将 this.sortBy 设置为空数组。

   • 获取主排序键和顺序：

     const primarySortKey = evt[0].key;
     const primarySortOrder = evt[0].order;

     evt 数组中的第一个元素 evt[0] 包含了用户当前点击的列的排序信息（key 和 order）。

   • 构建多字段排序规则：

     switch (primarySortKey) {
       case 'name':
         this.sortBy = [
           { key: 'name', order: primarySortOrder },
           { key: 'age', order: 'asc' },
         ];
         break;
       case 'age':
         this.sortBy = [{ key: 'age', order: primarySortOrder }];
         break;
       default:
         this.sortBy = [];
     }

     根据 primarySortKey，我们动态地构建 sortBy 数组。

     • 如果用户点击的是“姓名”列，我们将 sortBy 设置为 [{ key: 'name', order: primarySortOrder }, { key: 'age', order: 'asc' }]。这意味着首先按姓名排序，如果姓名相同，则进一步按年龄升序排序。
     • 如果用户点击的是“年龄”列，我们只按年龄排序 [{ key: 'age', order: primarySortOrder }]。
     • 可以根据需要扩展 switch 语句来处理更多列的复杂排序逻辑。

注意事项与扩展

• 默认排序： 如果需要数据表在加载时就带有默认排序，可以在 data() 中初始化 sortBy 数组，例如 sortBy: [{ key: 'name', order: 'asc' }, { key: 'age', order: 'asc' }]。
• 动态次要排序： 示例中次要排序字段（年龄）的顺序是固定的（asc）。如果需要次要排序字段的顺序也随着主排序字段的顺序变化（例如，主字段升序时次字段升序，主字段降序时次字段降序），可以在 handleSortChange 方法中根据 primarySortOrder 动态设置次要排序的 order。
• 多级次要排序： 如果需要三级甚至更多级的排序，只需在 sortBy 数组中添加更多的排序对象即可，Vuetify 会按照数组的顺序进行优先级排序。
• 服务器端排序： 对于大型数据集，通常会采用服务器端排序。在这种情况下，handleSortChange 方法会触发一个 API 请求，将 sortBy 数组作为参数发送给服务器，由服务器进行排序并返回已排序的数据。

总结

通过灵活运用 Vuetify 3.x v-data-table 的 :sort-by 属性和 @update:sortBy 事件，我们可以有效地克服 custom-key-sort 在多字段排序上的局限性。这种方法允许开发者完全控制排序逻辑，根据业务需求构建复杂的、优先级明确的多字段排序方案，从而提升用户体验和数据展示的专业性。

到这里，我们也就讲完了《Vuetify3.xVDataTable多排序方法》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！