时间戳

首页 > 解决方案 > Vuetify VDataTable 处理每页更新的项目

vuetify.js - Vuetify VDataTable 处理每页更新的项目

问题描述

我有一些来自后端的分页数据需要填写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 >
    );
  }

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

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

大概是这样的？

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

标签： vuetify.jsjsxv-data-table

解决方案

经过一番研究，我找到了解决方案。

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

您将需要在此结构中注册一个接收参数的处理函数。

示例代码如下，适用于 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 >
  );
},

推荐阅读