如何对 Vuetify 数据表中的列进行排序？

Question

我有一个带有服务器端数据的 Vuetify Datatable 组件。我想用我当前显示的内容对客户端的数据进行排序。但是当我单击该列进行排序时，它不会做任何事情。该列包含字符串值。

以下是我的数据表：

<v-data-table
    :page="page"
    :pageCount="numberOfPages"
    :headers="headers"     
    :items="services"
    :options.sync="options"
    :server-items-length="totalElements"
    :loading="loading"    
     :custom-filter="filterOnlyCapsText"
    class="elevation-1"
    @update:page="updatePagination"    
    :items-per-page="itemsPerPage"
    @update:items-per-page="setItemsPerPage"   
  >

我的 Vuejs 代码：

 data() {
    return {
      headers: [
        {
          text: "Service",
          value: "name",
          sortable: true,
        },
        {
          text: "Application",
          value: "application.name",
        },
        {
          text: "Description",
          value: "description",
        },
        {
          text: "Endpoint",
          value: "endpoint",
        },
        {
          text: "Environment",
          value: "environmentList",
        },
      ],
      page: 1,
      totalElements: 0,
      numberOfPages: 0,
      services: [],
      loading: true,
      options: {},
      itemsPerPage: 0,
      search: "",
    };
  },

  options: {
    handler() {
      console.log("handler got called");
    },
    deep: true,
  },

我不确定要在客户端对列进行排序需要什么。有没有我需要挂钩的听众？

谢谢

Answer 1

您使用服务器端分页，需要在事件发生时通过适当的 API 调用来实现此功能

update:page, update:sortBy, update:options

发射。

这是正确的行为，因为通常您需要对整个数据集进行排序，而不是对当前页面进行排序。

启用服务器端行为的选项： 服务器项长度

定义这个道具将禁用内置的排序和分页。