Vuetify VDataTable 处理每页更新的项目答案

【问题标题】：Vuetify VDataTable handle items per page updateVuetify VDataTable 处理每页更新的项目
【发布时间】：2021-01-15 16:47:02
【问题描述】：

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

【问题讨论】：

也许您可以在数据方法中定义一个变量：itemsPerPage，在您的数据表组件上添加:items-per-page="itemsPerPage"，然后在该变量上添加一个观察者？
是的，这就是我所做的，但我想利用 VDataTable 附带的每个页面选择器和页面导航按钮的默认行，并且要使用这些，我需要将处理程序注册到相应的道具

标签： vuetify.js jsx v-data-table

【解决方案1】：

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

prop 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 >
  );
},

【讨论】：