JavaScript

超轻量级php框架startmvc

Vue+ElementUI table实现表格分页

更新时间:2020-09-27 15:36:01 作者:startmvc
Vue+ElementUItable表格分页,供大家参考,具体内容如下分页的两种方式。前端分页,后端分页

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。