Element UI el-pagination分页组件

分页组件 el-pagination 常用属性

layout 表示分页需要显示的内容，用逗号分隔，布局元素会依次显示
布局元素有：total 总条数、sizes 控制每页显示的条数、prev 上一页、pager 页码列表、next 下一页、jumper 跳页

pager-count 设置最大页码按钮数：
默认情况下，当总页数超过 7 页时，pagination 会折叠多余的页码按钮，可设置大于等于 5 且小于等于 21 的奇数

background 属性可以为分页按钮添加背景色

small 属性设置小型分页按钮 boolean 型，默认 false

current-page 当前页，支持 .sync 修饰符
page-size 每页条数，支持 .sync 修饰符
page-sizes 接受一个整型数组，数组元素为每页显示的条数 [10, 20, 30] 表示三个选项，每页显示 10 个，20 个，30 个

只有一页时，设置 hide-on-single-page 属性隐藏分页

pageSize（每页条数，支持 .sync 修饰符） 改变时触发 size-change 事件
currentPage（当前页）改变时触发 current-change 事件

<template>
  <section>    
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrrentChange" 
      :current-page="1" 
      :page-sizes="[10, 20, 30, 40]"
      :page-size="100" 
      layout="total, sizes, prev, pager, next, jumper"
      :total="40"
      :hide-on-single-page="true">
    </el-pagination>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Home',
  methods: {
    handleSizeChange(val: string) {
      console.log(`每页${val}条`)
    },
    handleCurrrentChange(val: string) {
      console.log(`当前页${val}`)
    }
  }
})
</script>