Pagination 分页

代码演示

基础用法

分页组件的最基础的用法。

查看代码 < />

<template>
  <w-pagination :total="50"></w-pagination>
</template>

小型分页

分页组件默认风格是带背景色的样式, 为组件添加 plain 属性即可使用不带背景色的分页组件. 为组件添加 small属性即可使用小型分页组件, 小型分页不会被折叠页码。

查看代码 < />

<template>
  <w-pagination :total="50" :page-size="6" plain small></w-pagination>
</template>

显示更多页码

默认最多显示页码为 max-pager = 8, 大于最大显示页码时会将多余的页码折叠。

查看代码 < />

<template>
  <w-pagination :total="50" :page-size="2"></w-pagination>
</template>

共 50 条

共 50 条前往页

共 50 条

前往页

附加功能

更多附加功能展示。

查看代码 < />

<template>
  <w-pagination :current-pager="2"
    :total="50" :show="['prev', 'next', 'total']"
    @actived-change="handleActivedChange"></w-pagination>
  <w-pagination :total="50" :show="['prev', 'next', 'total', 'jump']">
  </w-pagination>
  <w-pagination :total="50" :page-size="4"
    :show="['prev', 'next', 'total', 'jump']">
  </w-pagination>
  <w-pagination :total="50" :page-size="4"
    @page-size-change="handlePageSizeChange"
    :page-sizes="[4, 8, 12, 16]" :show="['prev', 'next', 'total', 'jump']">
  </w-pagination>
</template>
<script>
  export default {
    methods: {
      handlePageSizeChange(val) {
        console.log(val, '条/页');
      },
      handleActivedChange(val) {
        console.log('当前第:', val, '页');
      },
    },
  }
</script>

共 50 条前往页

当前页变化拦截

通过before-change参数来达到页数跳转拦截的目的，目前可以拦截除page-size外的所有变化，可用于控制需要异步操作确认的跳转变化。

查看代码 < />

<template>
  <w-pagination :total="50" :page-size="4"
    :show="['prev', 'next', 'total', 'jump']"
    :before-change="interceptorHandler"></w-pagination>
</template>
<script>
  export default {
    methods: {
      interceptorHandler () {
        return new Promise((resolve) => {
          setTimeout(() => {
            const result = Math.random(1) > 0.5 ? true : false
            this.$message({
              message: result ? '通过拦截' : '发生错误',
              type: result ? 'success' : 'info'
            })
            // resolve true or false
            resolve(result)
          }, 1000)
        })
      }
    },
  }
</script>

API

Attributes

参数	说明	类型	可选值	默认值	Version
before-change	当前页变化之前触发的回调函数（用于拦截除pageSize改变外发生的当前页变化）	Function	—	—	v1.3.0
current-pager	当前第几页	Number	—	1
max-pager	最大显示页码数目 (超过页码将被折叠, 最小值为5)	Number	—	8
plain	是否使用轻量级分页样式(不带背景)	Boolean	—	false
page-size	每页数据长度	Number	—	10
small	是否启用小型分页	Boolean	—	false
show	启用附加功能	Array	total / jump / prev / next	['prev', 'next']
total	总数据长度	Number	—	—

Events

参数	说明	回调参数
actived-change	当前页码发生变化时触发	当前页码
page-size-change	page-size发生变化时触发	每页数据长度
to-prev	点击上一页	当前页码
to-next	点击下一页	当前页码

贡献者

类型	参与者
设计者	UED视觉组
维护者	UED前端组

# Pagination 分页

# 代码演示

基础用法

查看代码 < />

小型分页

查看代码 < />

显示更多页码

查看代码 < />

附加功能

查看代码 < />

当前页变化拦截

查看代码 < />

# API

# Attributes

# Events

# 贡献者

Pagination 分页

代码演示

API

Attributes

Events

贡献者