Vuetify VDataTable 处理每页更新的项目

Question

我有一些后台的分页数据需要填写VDataTable，比如下面的：

render() {
    return (
      <div>
        <VDataTable
          headers={this.headers}
          items={this.items || []}
          loading-text='Loading... Please wait'
          loading={this.$apollo.queries.items.loading}
          page={this.page}
          server-items-length={this.total}
        />
      </div >
    );
  }

而且我需要处理每页或每页的项目更新时的操作。

但我还没有找到有关如何执行此操作的文档。我得到的最接近的是 the official Vuetify reference 但他们使用模板记录，即 <v-data-table> 而不是 <VDataTable>。我怎样才能用上面的 JSX 方式做到这一点？

大概是这样的吧？

onItemsPerPageUpdate={this.handleItemsPerPageUpdate}
onUpdatePage={this.handlePageUpdate}

Answer 1

经过一番研究，我找到了解决办法。

道具 onPagination 将注册事件处理程序，监听默认页脚的分页变化，例如每页行数的变化，页码的变化。

您将需要在此 structure 中注册一个接受参数的处理函数。

示例代码如下，适用于 vuetify 2.0。

methods: {
  handlePageUpdate(options: any): any {
    this.page = options.page;
    this.pageSize = options.itemsPerPage;
  },
},

data() {
  items: [],
  total: 0, // total number of unpaged entries
  page: 1,
  pageSize: 10,
},

render() {
  return (
    <div>
      <VDataTable
        headers={this.headers}
        items={this.items}
        page={this.page}
        server-items-length={this.total || 0}
        onPagination={this.handlePageUpdate}
        footerProps={{'items-per-page-options': [10,20,30]}} // sets custom rows-per-page dropdown options
      />
    </div >
  );
},

Vuetify VDataTable 处理每页更新的项目

Vuetify VDataTable handle items per page update

jsx

vuetify.js

v-data-table