Posted in Javascript onDecember 14, 2019
Vue+ElementUI table表格分页,供大家参考,具体内容如下
分页的两种方式。前端分页,后端分页。两种方式各有个的优缺点吧。
前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理。但数据量不能太大,因为前端是先一次性加载所有数据,然后在做分页处理。在数据量多的情况下,加载相对应的会变慢。所有在前端做分页时要先考虑一下后期的数据量。
后端分页:因为是后端分页,前端在每点击一次分页时,便向后台请求一次数据。其实就是避免前端一次性从数据库获取大量数据
一、在elementUI中将表格、分页引入自己的页面中
<template> <div class="app"> <el-table :data="tableData" 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="currentPage" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </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 } }, methods: { handleSizeChange(val) { console.log(`每页 ${val} 条`); }, handleCurrentChange(val) { console.log(`当前页: ${val}`); } }, } </script>
二、前端分页(在一的基础上添加分页功能)
<template> <div class="app"> <!-- 将获取到的数据进行计算 --> <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="tabListPage"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div> </div> </template> <script> export default { data(){ return { // 总数据 tableData:[], // 默认显示第几页 currentPage:1, // 总条数,根据接口获取数据长度(注意:这里不能为空) totalCount:1, // 个数选择器(可修改) pageSizes:[1,2,3,4], // 默认每页显示的条数(可修改) PageSize:1, } }, methods:{ getData(){ // 这里使用axios,使用时请提前引入 axios.post(url,{ orgCode:1 },{emulateJSON: true}, { headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} } ).then(reponse=>{ console.log(reponse) // 将数据赋值给tableData this.tableData=data.data.body // 将数据的长度赋值给totalCount this.totalCount=data.data.body.length }) }, // 分页 // 每页显示的条数 handleSizeChange(val) { // 改变每页显示的条数 this.PageSize=val // 注意:在改变每页显示的条数时,要将页码显示到第一页 this.currentPage=1 }, // 显示第几页 handleCurrentChange(val) { // 改变默认的页数 this.currentPage=val }, }, created:function(){ this.getData() } } </script>
三、后端分页(在一的基础上添加分页功能)
<template> <div class="app"> <el-table :data="tableData" 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="tabListPage"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div> </div> </template> <script> export default { data(){ return { // 总数据 tableData:[], // 默认显示第几页 currentPage:1, // 总条数,根据接口获取数据长度(注意:这里不能为空) totalCount:1, // 个数选择器(可修改) pageSizes:[1,2,3,4], // 默认每页显示的条数(可修改) PageSize:1, } }, methods:{ // 将页码,及每页显示的条数以参数传递提交给后台 getData(n1,n2){ // 这里使用axios,使用时请提前引入 axios.post(url,{ orgCode:1, // 每页显示的条数 PageSize:n1, // 显示第几页 currentPage:n2, },{emulateJSON: true}, { headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",} } ).then(reponse=>{ console.log(reponse) // 将数据赋值给tableData this.tableData=data.data.body // 将数据的长度赋值给totalCount this.totalCount=data.data.body.length }) }, // 分页 // 每页显示的条数 handleSizeChange(val) { // 改变每页显示的条数 this.PageSize=val // 点击每页显示的条数时,显示第一页 this.getData(val,1) // 注意:在改变每页显示的条数时,要将页码显示到第一页 this.currentPage=1 }, // 显示第几页 handleCurrentChange(val) { // 改变默认的页数 this.currentPage=val // 切换页码时,要获取每页显示的条数 this.getData(this.PageSize,(val)*(this.pageSize)) }, }, created:function(){ this.getData(this.PageSize,this.currentPage) } } </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
Vue+ElementUI table实现表格分页
- Author -
小城听风雨声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@