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

<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>

转载于:https://www.cnblogs.com/huqi92/p/9435279.html