Vuetable 分页

该mixin提供了滑动样式分页功能,其中当前页面(不在第一个或最后一个位置时)始终位于分页列表的中间。

属性

css

  • 类型:Object

  • 默认:

    {
      wrapperClass: 'ui right floated pagination menu',
      activeClass: 'active large',
      disabledClass: 'disabled',
      pageClass: 'item',
      linkClass: 'icon item',
      paginationClass: 'ui bottom attached segment grid',
      paginationInfoClass: 'left floated left aligned six wide column',
      dropdownClass: 'ui search dropdown',
      icons: {
        first: 'angle double left icon',
        prev: 'left chevron icon',
        next: 'right chevron icon',
        last: 'angle double right icon',
      }
    }
    
  • 使用:

    css属性包含VuetablePagination在其模板中使用的大多数CSS类。

on-each-side

  • 类型:Number

  • 默认:2

  • 使用:

    此属性的值指定中心每侧的幻灯片大小。

first-page

  • 类型:Number

  • 默认:1

  • 使用:

    第一页编号。将此道具设置为0,以从零开始的分页。

Computed

totalPage

  • 返回:Number

  • 使用:

    可用页面总数。该值取自last_page分页信息字段。

lastPage

  • 返回:Number

  • 使用:

    最后页码。

isOnFirstPage

  • 返回:Boolean

  • 使用:

    返回 true当前页码是否为第一页;否则,返回false.

isOnLastPage

  • 返回:Boolean

  • 使用:

    返回 true当前页码是否为最后一页;否则,返回false.

notEnoughPages

  • 返回:Boolean

  • 使用:

    确定页面总数是否足以显示而不滑动。

windowSize

  • 返回:Number

  • 使用:

    滑动窗口的大小由on-each-side * 2 + 1计算得出。

windowStart

  • 返回:Number

  • 使用:

    返回要显示在最左边的首页编号。

Data

tablePagination

  • 类型:Object

  • 默认:null

    从Vuetable收到的分页信息。

Methods

isCurrentPage

  • params:

    • page: Number
  • 使用:

    确定给定的页码是否为当前页。

setPaginationData

  • params:

    • tablePagination: Object — 分页信息
  • 使用:

    设置 tablePagination渲染分页组件时要使用的数据。

resetData

  • params: none

  • 使用:

    此方法将设置tablePagination为 null.

Events

vuetable-pagination:change-page

  • 类型:emit

  • payload:

    • page: Number | String
  • 使用::

    当用户单击任何分页项以请求给定页码的数据时,将触发此事件。