Relax Vue UI

# Pagintion

用于数据分页。

# Usage

# 基础用法

re-pagination组件的用法基本与el-pagination一致。

对齐方式： 靠左 居中 靠右

re-pagination可以通过设置align属性来设置分页组件的对齐方式。

<template>
  <div>
    <div style="margin-bottom: 10px;">
      对齐方式：
      <el-radio-group v-model="align" size="mini">
        <el-radio-button label="left">靠左</el-radio-button>
        <el-radio-button label="center">居中</el-radio-button>
        <el-radio-button label="right">靠右</el-radio-button>
      </el-radio-group>
    </div>
    <re-pagination :total="total" :align="align" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      align: "left",
      total: 100,
    };
  },
};
</script>
Expand Copy

# 处理分页事件

re-pagination将页码改变事件和页大小改变事件合并为pagination事件。

使用 pagination 事件

使用 current-change、size-change、next-click、prev-click 事件

1、pagination事件的参数是一个对象，其中currentPage 为当前页码，pageSize为每页显示条数，from为触发该事件来源，值为'currentPage'或'pageSize'；
2、对于pagination事件而言，即使不给re-pagination绑定currentPage和pageSize属性，pagination事件仍会传递组件当前正确的页码和页大小;
3、在改变pageSize时，如果pageSize >= total且此时currentPage不为1，则组件会把currentPage重置为1，并触发两次pagination事件；
4、re-pagination也支持使用el-pagination原有的current-change、size-change、next-click、prev-click事件。

<template>
  <div>
    <p>使用 pagination 事件</p>
    <re-pagination
      :total="total"
      :pageSizes="pageSizes"
      @pagination="handlePagination"
    />
    <p>使用 current-change、size-change、next-click、prev-click 事件</p>
    <re-pagination
      :total="total"
      :pageSizes="pageSizes"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      @next-click="handleNextClick"
      @prev-click="handlePrevClick"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 100,
      pageSizes: [10, 20, 30, 50, 100],
    };
  },
  methods: {
    handlePagination({ currentPage, pageSize, from }) {
      this.$message.success(
        `当前页码：${currentPage}，每页条数：${pageSize}，改变参数为：${from}`
      );
    },
    handleCurrentChange(currentPage) {
      this.$message.success(`当前页码：${currentPage}`);
    },
    handleSizeChange(pageSize) {
      this.$message.success(`每页条数：${pageSize}`);
    },
    handleNextClick(currentPage) {
      this.$message.success(`点击下一页，当前页码：${currentPage}`);
    },
    handlePrevClick(currentPage) {
      this.$message.success(`点击上一页，当前页码：${currentPage}`);
    },
  },
};
</script>
Expand Copy

# API

# Attributes

参数 说明 类型 可选值 默认值
layout 组件布局 String - total,sizes,prev,pager,next,jumper
background 使用背景色 Boolean - true
total 总条数，必需 Number - -
currentPage 当前页码 Number - 1
pageSize 每页条数 Number - 10
pageSizes 每页条数选项 Array - [10, 20, 30, 50]
pagerCount 页码按钮 Number - 7
align 对齐方式 String left,center,right 'center'
hidden 是否隐藏 Boolean - false

# Events

事件名 说明 参数
pagination 分页跳转、分页大小改变事件 {currentPage, pageSize, from}
el-pagination 事件 el-pagination原本的事件，请参考element-ui文档 -

pagination 事件参数详细说明：

pagination事件的参数是一个对象，其中 currentPage 为当前页码，pageSize 为每页显示条数，from 为触发该事件来源，值为currentPage或pageSize。

# Slots

名称 说明 参数
default el-pagination默认插槽 -

← Converter →