element-ui表格控件纯前端分页方法

HTML

<div id="app">
　　<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"             
     style="width: 100%">
　　　　<el-table-column v-for="item in tableHeader" 
            :prop="item.key" 
            :label="item.name" 
            show-overflow-tooltip=true>
　　　　</el-table-column>
　　</el-table>
　　<el-pagination 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" 
        :current-page.sync="currentPage" 
        :page-size="pageSize" 　　　　
        layout="total, prev, pager, next,jumper" 
        :total="tableData.length">
　　</el-pagination>
</div>

js

<script>
var app = new Vue({
　　el: '#app',
　　data: {
　　　　tableHeader: [{
　　　　　　　　name: '日期',
　　　　　　　　key: 'date'
　　　　　　},
　　　　　　{
　　　　　　　　name: '姓名',
　　　　　　　　key: 'name'
　　　　　　},
　　　　　　{
　　　　　　　　name: '地址',
　　　　　　　　key: 'address'
　　　　　　}],
　　　　tableData: [{
　　　　　　date: '2016-05-04',
　　　　　　name: '王小虎2',
　　　　　　address: '上海市普陀区金沙江路 1517 弄'
　　　　},{
　　　　　　date: '2016-05-03',
　　　　　　name: '王小虎15',
　　　　　　address: '上海市普陀区金沙江路 1516 弄'
　　　　}],
　　　　pageSize: 5,
　　　　currentPage: 1,
　　　　},
　　　　methods: {
　　　　　　 handleSizeChange(val) {
              this.pagesize = val;
            },
            handleCurrentChange(val) {
              this.currentPage = val;
            },
　　　　}
})
</script>