<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格数据分页</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="vue"> <el-table :data="table_list.slice((currentPage-1)*pagesize,currentPage*pagesize)" :default-sort="{prop: 'date', order: 'descending'}" height="450" border style="width: 100%" stripe highlight-current-row> <el-table-column label="序号"> <template slot-scope="scope"> {{scope.$index+1}} </template> </el-table-column> <el-table-column prop="date" label="工号"> </el-table-column> <el-table-column prop="name" label="姓名"> </el-table-column> <el-table-column prop="address" label="职位"> </el-table-column> <el-table-column fixed="right" label="操作" width="100"> <template slot-scope="scope"> <el-button type="text" size="small">移除 </el-button> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="table_list.length"> </el-pagination> </div> </body> <script src="http://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script> <script src="https://cdn.suoluomei.com/common/js2.0/element-ui/2.12/lib/theme-chalk/index.js"></script> <script> new Vue({ el: '#vue', data: { table_list: [{ date: '20160503', name: '王小虎', address: '销售' }, { date: '20160502', name: '王小虎', address: '销售' }, { date: '20160504', name: '王小虎', address: '销售' }, { date: '20160501', name: '王小虎', address: '销售' }, { date: '20160508', name: '王小虎', address: '销售' }, { date: '20160506', name: '王小虎', address: '销售' }, { date: '20160507', name: '王小虎', address: '销售' }], currentPage: 1, pagesize: 10, }, methods: { handleSizeChange: function (size) { this.pagesize = size; }, handleCurrentChange: function (currentPage) { this.currentPage = currentPage; } } }) </script> </html>
转自:https://cloud.tencent.com/developer/article/1691239