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>