ElementUI实现表格分页功能
ElementUI实现表格分页功能
<!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