vue+elementUI组件table实现前端分页功能
2019-12-15 12:08
991 查看
前端分页和后端分页就是请求的差异,前端分页的话只请求一次,所以要在render table组件的时候控制下数据
:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" //不多解释
再就是设置分页器total等于table数据的长度
:total="tableData.length"
点击分页器的操作
methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); this.currentPage = 1; this.pageSize = val; }, handleCurrentChange(val) { console.log(`当前页: ${val}`); this.currentPage = val; } }
千言万语不如上个demo~
<template> <div> <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" 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> <!-- 分页器 --> <div class="block" style="margin-top:15px;"> <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[1,5,10,20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"> </el-pagination> </div> </div> </template> <script> export default { data() { return { tableData: [ { date: "2016-05-02", name: "王小虎", address: "上海市普陀区金沙江路 1518 弄" }, { date: "2016-05-04", name: "王小虎", address: "上海市普陀区金沙江路 1517 弄" }, { date: "2016-05-01", name: "王小虎", address: "上海市普陀区金沙江路 1519 弄" }, { date: "2016-05-03", name: "王小虎", address: "上海市普陀区金沙江路 1516 弄" } ], currentPage: 1, // 当前页码 total: 20, // 总条数 pageSize: 1 // 每页的数据条数 }; },methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); this.currentPage = 1; this.pageSize = val; }, handleCurrentChange(val) { console.log(`当前页: ${val}`); this.currentPage = val; } } }; </script>
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- 前端分页功能的实现以及原理
- python2.0_day19_前端分页功能的实现
- 纯jQuery实现前端分页功能
- Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能
- Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能
- SSM框架搭建以及简单增删改查以及分页功能的实现(前端bootstrap+css+jq)
- 基于LayUI实现前端分页功能的方法
- 基于之前写的博客(SSM框架搭建以及简单增删改查以及分页功能的实现(前端bootstrap+css+jq))进一步的封装(改为SqlSessionTemplate方式实现)
- 网站前端_JavaScript-项目经验.纯JavaScript实现客户端的分页功能?
- 前端分页功能的实现以及原理
- 前端分页功能的实现以及原理
- 基于jquery.pagination.js前端实现分页功能(假分页)
- 基于LayUI实现前端分页功能
- 前端分页功能的实现以及原理
- 前端分页功能的实现以及原理
- 前端分页功能的实现以及原理(jQuery)
- 前端分页功能的实现以及原理
- js调用ajax根据后台返回的总数前端设置每页的条数实现分页功能
- 前端通过Ajax请求从后台返回数据到页面显示,实现分页功能
- 前端分页功能的实现以及原理