先上代码
<template> <div> <el-table :data="tableData.slice((page - 1) * limit, page * limit)" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="PageNumber" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> export default { data() { return { // 总数据 tableData: [ { date: '2016-05-02', name: 'asdf', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' }, { date: '2016-05-01', name: 'zxcv', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: 'fdds', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: 'qweqwe', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: 'fdghfh', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: 'sdfsdf', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }, { date: '2016-05-03', name: 'sdgdfg', address: '上海市普陀区金沙江路 1516 弄' } ], // 默认显示第几页 page: 1, // 总条数, 根据接口获取数据长度(注意: 这里不能为空) total: 50, // 每页显示个数选择器的选项设置 PageNumber: [1, 2, 3, 4, 5], // 每页显示条目个数 limit: 5 } }, methods: { // limit 改变时会触发 handleSizeChange(val) { // 改变每页显示的条数 this.limit = val // 注意:在改变每页显示的条数时,要将页码显示到第一页 this.page = 1 }, // page 改变时会触发 handleCurrentChange(val) { // 改变默认的页数 this.page = val } } } </script>
展示