<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>
<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: function() {},
handleCurrentChange: function() {}
}
})
</script>