排序

警告

这仅适用于API模式

如果您的API端点支持排序,则当您指定数据中的哪一列是可排序的时,Vuetable也可以自动与其交互。

要指定特定的列是可排序的,请sortField向该列的字段定义对象添加选项。

{
  name: 'email',
  sortField: 'email'  
}

可排序的列将使用中的.sortableCSS类呈现,<th>并且它将响应单击以在之间切换

  • 如果该列不是当前的排序顺序,则将其设置为排序顺序。
  • 如果这是当前的排序顺序,则在升序和降序之间切换。

它的作用是Vuetable将向服务器端点发送一个新请求,该请求的sort参数指定了服务器期望哪个sortOrder.field和哪个sortOrder.direction 期望。

这是查询字符串中的示例sort参数。

  http://api.example.com/users?sort=email|asc

其中, sort=email|asc是根据sort默认排序顺序字段email和默认排序方向构造的参数asc。它们由竖线字符(|)连接。

提示

“排序”参数键及其值构造的自定义方式。

  • 使用 query-paramsprop将的“键”名称从更改sort.
  • 使用 sort-params更改排序值格式。

如果您的API端点使用不同的构造,则可以通过提供自己的函数来构造sort参数来覆盖此行为。请参阅下面的更多信息。

也可以看看:

初始排序

要提供初始排序顺序,请使用sort-order prop指定默认的排序列。

<vuetable
  //...
  :sort-order="sortOrder"
></vuetable>
new Vue({
  //...
  data: {
    //...
    sortOrder: [
      {
        field: 'email',
        direction: 'asc'
      }
    ]
  }
})

警告

请注意,sort-orderprop必须是数组,即使它是单一排序也是如此。

也可以看看:

多列排序

可以通过将multi-sort prop值设置为来启用多列排序true.

O启用后,用户可以使用Alt + Click(在Mac上为Option + Click)来使用多列排序功能。如果您想使用除键以外的其他键alt,请使用multi-sort-keyprop指定以下值之一

  • alt — Alt / 选项
  • ctrl — Ctrl / 控制
  • meta — Window / Command
  • shift — 换档

也可以看看:

覆盖排序查询字符串

您可以通过将函数分配给sort-paramsprop 来覆盖查询字符串中sort参数的构造方式。该函数将接收当前数组sortOrder作为参数,并且它必须返回sort查询字符串的字符串值。

<template>
  <vuetable 
    api-url="..."
    :fields="fields"
    :sort-params="getSortParam"
  ></vuetable>
</template>
//
// If
//      sortOrder = [
//          { field: "gender", direction: "desc"},
//          { field: "name", direction: "asc"},
//      ]
// This will return
//      '-gender,name'
//
<script>
  //..
  methods: {
    getSortParam(sortOrder) {
      return sortOrder.map(function(sort) {
        return (sort.direction === 'desc' ? '-' : '') + sort.field
      }).join(',')
    }
  }
</script>

也可以看看:

设置可排序列的样式

默认情况下,如果指定sortField字段定义对象,则该字段的<th>标记中将具有“可排序”的CSS类。

您可以根据需要为该“可排序”类设置样式。例如,当用户将鼠标悬停在“可排序”字段上时,它将更改前景色。

.vuetable th.sortable:hover {
  color: #2185d0;
  cursor: pointer;
}

在可排序列上显示排序图标

如果愿意,Vuetable还允许您在可排序字段上显示排序图标(类似于)。

要显示排序图标,您必须

  • 通过启用它:show-sort-icons="true"
  • css 道具中 设置与CSS相关的属性
    • sortableIcon — 排序图标
    • ascendingIcon — 当前字段按升序排序时的升序排序图标
    • descendingIcon — 当前字段按降序排序时的降序排序图标
    • ascendingClass
      <th> 当前将字段按升序排序时 要插入的类名,否则,将删除该类名。
    • descendingClass <th>当前以降序对字段进行排序时 要插入的类名,否则,将删除该类名。

有关 css更多详细信息,请参见prop。

覆盖默认查询字符串

默认情况下,Vuetable在查询字符串中使用以下键,该键将被发送到服务器。

  • sort — 其值将包含请求的排序顺序
  • page — 其值将包含请求的页码
  • per_page — 其值将包含每页请求的记录

如果要创建自己的API后端,则可以使用此默认值。

但是,如果您使用的是其他人的API,或者您已经拥有自己的与之不符的API。通过query-params属性提供,可以告诉Vuetable它应该使用什么密钥。

这是query-params 的默认值。

{
  sort: 'sort',
  page: 'page',
  perPage: 'per_page'
}

假设您的API使用sort_order, page_no, 和 page_size,您可以轻松地告诉Vuetable这样使用它们,

<vuetable
  //...
  :query-params="{ sort: 'sort_order', page: 'page_no', perPage: 'page_size' }"
></vuetable>

您还可以通过分配一个函数来完全覆盖查询字符串的构造方式query-params

该函数将接收3个参数,分别是

  • 当前排序顺序数组
  • 当前页码
  • 当前页面大小

该函数必须返回键值对的对象。这是一个例子。

<template>
  <vuetable
    //...
    :query-params="makeQueryParams"
  ></vuetable>
</template>

<script>
export default {
  //...
  methods: {
    makeQueryParams (sortOrder, currentPage, perPage) {
      return {
        sortBy: sortOrder[0].field,
        sortOrder: sortOrder[0].direction,
        pageNo: currentPage,
        pageSize: perPage
      }
    }
  }
}
</script>

也可以看看: