Api

el-pagination

基础用法

适用广泛的基础用法。

1
2
3
4
5
6
7
8
9

<el-pagination
  layout="prev, pager, next"
  :total="50">
</el-pagination>

<el-pagination
  layout="prev, pager, next"
  :total="50">
</el-pagination>

小型分页

在空间有限的情况下，可以使用简单的小型分页。

1
2
3
4
5
6
7
8
9
10
11

<el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination>

<el-pagination
  small
  layout="prev, pager, next"
  :total="50">
</el-pagination>

复杂分页

能够承载复杂交互的分页，显示更多页码。

1
2
3
4
5
6
7
8
9

<el-pagination
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

<el-pagination
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

附加功能

在复杂分页的基础上，根据场景需要，可以添加其他功能模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  layout="sizes, prev, pager, next, jumper, total"
  :total="1000">
</el-pagination>

<el-pagination
  layout="sizes, prev, pager, next, jumper, total"
  :total="1000">
</el-pagination>

<script>
  module.exports = {
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

API

参数 说明 类型 可选值 默认值
small 小型分页样式 Boolean false
page-size 每页个数 Number 10
total 总个数 Number 0
current-page 当前页数 Number 0
layout 组件布局，子组件名用逗号分隔。 String prev, pager, next, jumper, slot, ->, total ‘prev, pager, next, jumper, slot, ->, total’
page-sizes 切换每页显示个数的子组件值 Number[] [10, 20, 30, 40, 50, 100]
size-change pageSize 改变时会触发的事件 Function
current-change currentPage 改变时会触发的事件 Function