element-ui pagination分页组件的具体使用

el-pagination的格式：

<el-pagination/>

pagination组件的属性

---

pagination组件的事件

常用属性与事件的说明

属性：
:background       是否为分页按钮添加背景色  true为添加，false为不加。默认为false
:page-size        每页显示条目个数，支持 .sync 修饰符
:total		  总条目数
:current-page 	  当前页数，支持 .sync 修饰符
layout		  组件布局，子组件名用逗号分隔 
sizes(每页显示条目个数),prev(向前翻页)
pager(页), next(向后翻译) 
jumper(页面跳转), total(总页数)
:page-sizes 	  每页显示个数选择器的选项设置
事件：
size-change	  pageSize 改变时会触发
current-change	  currentPage 改变时会触发

.sync修饰符

sync是同时，同步的意思，该修饰符的作用相当与双向绑定，能够实时的更新数据。

具体实例

<template>
  <div class="app-container">
    <div class="the-container">
      <el-pagination
        :total="total"
        :current-page.sync="current"
        :page-size.sync="size"
        :page-sizes="[5,10,50,100]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="sizeList"
        @current-change="getTableList"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      total: 100,
      size: 5,
      current: 1
    }
  },
  methods: {
    sizeList() {
      this.current = 1
      this.getTableList()
    },
    getTableList() {
      const { current, size } = this
      const params = {
        current,
        size
      }
      console.log(params)
    }
  }
}
</script>

<style lang="scss" scoped>
  .app-container{
    height: 100%;
    background-color: #f1f1f1;
  }
  .the-container{
    height: 100%;
    padding: 20px;
    background-color: #fff;
  }
</style>