小编wal*_*nns的帖子

Vuetify:服务器端分页数据表不会对客户端进行排序

问题

问题已经在标题中描述:当我使用服务器端分页数据表(此组件: https: //vuetifyjs.com/en/components/data-tables)并希望它对客户端进行排序(例如我使用公共API 我没有开发)默认排序不适用于该组件。

有可能吗?该文档仅给出了服务器端分页和排序的示例。

我的组件:

<v-data-table
          :headers="datapointHeaders"
          :items="datapoints"
          :items-per-page="datapointsPerPage"
          :server-items-length="datapointsTotalItems"
          :loading="loading"
          :loading-text="'Loading datapoints ...'"
          :options.sync="options"
          :footer-props="footerProps"
        >
          <template v-slot:item.health="{ item }">
            <StatusLamp
              :color="item.health"
              :classes="'ml-2'"
            />
          </template>
          <template v-slot:item.attributes="{ item }">
            <v-btn
              outlined
              small
              color="blue"
              @click="showAttributes(item)"
              class="mb-1 mr-1 mt-1"
            >details</v-btn>
          </template>
        </v-data-table>
Run Code Online (Sandbox Code Playgroud)

JS部分:

private options: any = {
  itemsPerPage: this.datapointsPerPage,
  page: this.datapointsCurrentPage,
};

@Watch('options.page')
onPageChange(value: number, oldValue: number): void {
  this.fetchDatapoints(value, this.options.itemsPerPage);
}

@Watch('options.itemsPerPage')
onPerPageChange(value: number, oldValue: number): void {
  this.fetchDatapoints(this.page, value);
}

get loading(): boolean {
  return …
Run Code Online (Sandbox Code Playgroud)

javascript datatable vue.js server-side-rendering vuetify.js

7
推荐指数
1
解决办法
9707
查看次数