本人是前端小白一枚 此文章用以记录自己使用vue+element-ui实现项目时候实现的分页功能(和后续文章实现的功能不分先后,用到什么记录什么)一次请求将全部要展示的数据获取到，分页在前端对数据进行处理进行分页展示
<el-tab-pane label="信息推送" name="second"><el-table:data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"borderstyle="width: 100%"><el-table-column fixed prop="xmmc" label="项目名称" width="200" align="center"></el-table-column><el-table-column prop="zdmj" label="征地面积" width="200" align="center"></el-table-column><el-table-column prop="sxmc" label="市县名称" width="200" align="center"></el-table-column><el-table-column prop="pzwh" label="批准文号" width="200" align="center"></el-table-column><el-table-column prop="pzjg" label="批准机关" width="200" align="center"></el-table-column><el-table-column prop="pzmj" label="批准面积" width="200" align="center"></el-table-column><el-table-column prop="sqdw" label="申请单位" width="200" align="center"></el-table-column><el-table-column prop="pzsj" label="批准时间" width="200" align="center"></el-table-column><el-table-column fixed="right" label="操作" align="center"><template slot-scope="scope" align="center"><el-button @click="handleClick(scope.row)" type="text" size="mini">查看</el-button></template></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[10, 20, 30, 50, 100]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="list.length"style="float:right;margin-top:15px;"></el-pagination></el-tab-pane>data() {return {list: [],//保存请求到的数据pageSize: 10, //每页多少条currentPage: 1, // 当前页}},methods: {// 每页多少条handleSizeChange(val) {this.pageSize = val;},// 当前页handleCurrentChange(val) {this.currentPage = val;},// 项目信息acquire() {let _this = this;let userid = window.localStorage.getItem("userid");this.$axios.post("http://59.202.52.8/api/SelectData/SelectZdxmList",{ userid },{headers: {"Content-Type": "application/json;charset=utf-8","Access-Control-Allow-Origin": "*",Authorization: window.localStorage.getItem("token")}}).then(res => {// 把成功请求到的数据保存到list中_this.list = res.data.list;}).catch(err => {console.log(err);});},
