分页

Vuetable带有两个分页组件和一个分页信息组件,您可以对其进行扩展以轻松地构建自己的组件。

  • VuetablePagination实现为滑动窗口,该窗口仅显示一定数量的页面,并带有按钮以跳转到第一页,上一页,下一页和最后一页。

    [First][Prev][1][2][3][4][5][Next][Last]
    

    提示

    滑动页面数= onEachSide * 2 +1

  • VuetablePaginationDropdown它被实现为显示当前页面的下拉按钮。用户可以单击下拉列表来选择页面。它的侧面还具有上一页按钮和下一页按钮。此分页组件旨在占用更少的空间。

    [Prev][ Page 1 ▼ ][Next]
    

这是可能的,因为它们都建立在的基础上VuetablePaginationMixin,后者包含大多数分页逻辑。因此,您只需要提供从该mixin嵌入分页功能的模板。

而这正是VuetablePagination组件发生的情况。如果查看组件的源代码,您会看到它仅包含模板。实际上,所有方法和道具都在mixin中。

对于VuetablePaginationDropdown,它仅使用mixin,还添加了自己的prop和event。

从零开始的分页

在某些系统中,第一页从0(零)开始,第二页从1开始,依此类推。在这种情况下,您可以使用first-page将其设置为0。因此,当Vuetable从API端点请求第一页时,它将0改为请求页面。

  <vuetable
    api-url="..."
    :first-page="0"
  ></vuetable>

分页组件绑定到Vuetable

为了使Vuetable的兼容分页组件正常工作,您需要首先将其与Vuetable绑定。这可以通过3个简单的步骤完成:

  • 在上Vuetable,用于v-on侦听vuetable:pagination-data事件并指定绑定处理函数。

    <template>
      <div>
        <vuetable ref="vuetable"
          // This tells Vuetable that when the paginaiton data is available,
          // call `onPaginationData` method.
          @vuetable:pagination-data="onPaginationData"
        ></vuetable>
        <vuetable-pagination ref="pagination"></vuetable-pagination>
      </div>
    </tempalte>
    
  • 在上VuetablePagination,用于v-on侦听vuetable-pagination:change-page事件并指定绑定处理函数。

    <template>
      <div>
        <vuetable ref="vuetable"
          //...
        ></vuetable>
        <vuetable-pagination ref="pagination"
          // This tells VuetablePagination component that when there is
          // a request to change the page, call `onChangePage` method.
          @vuetable-pagination:change-page="onChangePage"
        ></vuetable-pagination>
      </div>
    </tempalte>
    
  • 在组件中定义两个绑定处理程序函数。

    //...
    methods: {
      //...
      // when the pagination data is available, set it to pagination component
      onPaginationData (paginationData) {
        this.$refs.pagination.setPaginationData(paginationData)
      },
      // when the user click something that causes the page to change,
      // call "changePage" method in Vuetable, so that that page will be
      // requested from the API endpoint.
      onChangePage (page) {
        this.$refs.vuetable.changePage(page)
      }
    }
    

分页组件的工作方式

分页组件假定以下信息可用于其计算

  • total — 可用记录总数
  • per_page — 每页中的记录数(页面大小)
  • current_page — 此数据块的当前页码
  • last_page — 此数据的最后页号
  • next_page_url — 下一页的网址
  • prev_page_url — 前一页的网址
  • from — 此页面的起始记录,与页面大小有关
  • to — 该页面的最终记录,与页面大小有关

这些信息应该通过setPaginationData方法通过其参数对象传递给它。

Vuetable希望此元数据与数据一起从API端点返回。vuetable:pagination-data每次成功从API端点检索数据时,它将发出带有分页数据的事件。

警告

您必须确保上述信息可用,否则该VuetablePagination组件将无法正常工作。

一旦有分页信息,就可以使用以下计算的属性来构建分页组件的模板。

  • totalPage — 最后一页
  • isOnFirstPage — 当前页码是否为第一页
  • isOnLastPage — 当前页码是否为最后一页
  • notEnoughPages — 是否所有页面都小于滑动窗口的大小。(请帮忙建议一个更好的名字)
  • windowSize — 滑动分页窗口的大小。用on-each-side* 2 +1 计算。
  • windowStart — 此滑动分页窗口的首页编号。

CSS

像Vuetable,VuetablePaginationVuetablePaginationDropdown尝试将CSS尽可能中性,所以你可以在任何CSS框架使用它。但是要使其外观美观并集成在一起,您应该自定义以下CSS类

  • wrapperClass
  • activeClass
  • disabledClass
  • pageClass
  • linkClass
  • paginationClass
  • paginationInfoClass
  • dropdownClass
  • icons
    • first
    • prev
    • next
    • last

双方VuetablePaginationVuetablePaginationDropdown有定制一些道具。请检查其文档以获取更多详细信息。

使自己的分页成为Vuetable

VuetablePaginationMixin已经为分页组件提供了大多数功能。您可以轻松地使用它轻松创建特定CSS框架的分页组件。

您甚至可以在不使用它的情况下创建自己的分页组件,但是如果您了解Vuetable的工作原理,仍然可以使用Vuetable。

也可以看看: