Element-ui（el-table、el-pagination）實現表格分頁

el-pagination中：

屬性： total代表總條目數 

事件： current-change用於監聽頁數改變，而內容也發生改變

<el-table
   :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
   @selection-change='handleCurrentChange'
   :header-cell-style="{background:'#1057CD',color:'#fff'}"
   stripe
   style="width: 100%">
        <el-table-column type="index" :index="indexMethod" label="序號"></el-table-column>
        ...

　　　　　　<el-table-column label="狀態" align="center">

　　　　　　　　<template slot-scope="scope">

　　　　　　　　　　<el-button size="mini" v-if="scope.row.www">待處理</el-button>

　　　　　　　　　　<el-button size="mini" v-else>已處理</el-button>

　　　　　　　　</template>

　　　　　　</el-table-column>

　　　　　　...

　　　　　　

　　　　　　<el-table-column label="操作" align="center" width='300'>

　　　　　　　　<template>

　　　　　　　　　　<el-button size="mini" class="el-icon-view">查看</el-button>

　　　　　　　　　　<el-button size="mini" class="el-icon-edit">修改</el-button>

　　　　　　　　　　<el-button size="mini" class="el-icon-delete-solid">刪除</el-button>

　　　　　　　　</template>

　　　　　　</el-table-column>

</el-table>

<el-pagination
    background
    layout="prev, pager, next"
    :total="this.tableData.length"
    @current-change = 'handleCurrentChange'
    :page-size="pagesize">
</el-pagination>

export default {
    data(){
        return{
            tableData:[
               
            ],
            total:0,  //總條數
            pagesize:10,  //每頁的條數
            currentPage:1,  //默認開始頁面
        }
    },
    methods:{
        indexMethod(index){
            return index+1;
        },
        handleCurrentChange:function(currentPage){
            this.currentPage = currentPage;
        },
    }
    
}