之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd2017/p/9714633.html)。由于工作上的需要,写了很多表格,因此对于分页有了新的理解,在这里重新总结一下,用 element ui 自带的分页组件实现前端分页和后端分页。

首先我们将分页功能的代码封装成一个组件,这样以后要用的时候可以直接拿,这里需要一个预备知识就是父子组件的交互,不清楚的可以自己先看一下。

新建pagination.vue文件,内容如下:

<template>
<div :class="{'hidden':hidden}" class="pagination-container">
<el-pagination
:background="background"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:layout="layout"
:page-sizes.sync="pageSizes"
:pager-count.sync="pageCount"
:pager-count="pageCount"
:total="total"
v-bind="$attrs"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
</template> <script>
import { scrollTo } from "@/utils/scroll-to"; export default {
name: "Pagination",
props: {
total: {
required: true,
type: Number
},
page: {
type: Number,
default: 1
},
limit: {
type: Number,
default: 10
},
pageCount: {
type: Number,
default: 5
},
pageSizes: {
type: Array,
default() {
return [10, 20, 30, 50];
}
},
layout: {
type: String,
default: "total, sizes, prev, pager, next, jumper"
},
background: {
type: Boolean,
default: true
},
autoScroll: {
type: Boolean,
default: true
},
hidden: {
type: Boolean,
default: false
}
},
computed: {
currentPage: {
get() {
return this.page;
},
set(val) {
this.$emit("update:page", val);
}
},
pageSize: {
get() {
return this.limit;
},
set(val) {
this.$emit("update:limit", val);
}
}
},
methods: {
handleSizeChange(val) {
this.$emit("pagination", { page: this.currentPage, limit: val });
if (this.autoScroll) {
scrollTo(0, 800);
}
},
handleCurrentChange(val) {
this.$emit("pagination", { page: val, limit: this.pageSize });
if (this.autoScroll) {
scrollTo(0, 800);
}
}
}
};
</script> <style scoped>
.pagination-container {
background: #fff;
padding: 32px 16px;
}
.pagination-container.hidden {
display: none;
}
</style>

新建父组件myTable.vue,引入pagination插件

<el-table
v-loading="listLoading"
:key="tableKey"
:data="list"
border
fit
style="width: 100%;"
>
<!-- 表格内容省略 -->
………… </el-table> <!-- 引入pagination插件 -->
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>

注册变量、方法

export default {
data() {
return {
list: null,
total: 0,
listQuery: {
page: 1,
limit: 10
}
}
},
   created() {
this.getList();
}
methods: {
// 获取列表数据
getList() {}
}
}

在首次进入页面, created 阶段以及每次点击页码时调用 getList() 方法,getList() 方法根据前端分页和后端分页的不同需求有不同写法。

先看后端分页,后端分页比较简单,只要将当前页数 page 与每页显示条数 limit 传给后台,再把后台返回的数据赋值给list即可。

getList() {
axios.get('/list', {
params: this.listQuery
}).then(res => {
this.list = res.value.list;
})
}

前端分页一次性拿到所有数据,要根据 page 和 limit 以及 total 通过前端计算来决定每一页展示哪些数据,计算公式为

this.list = res.value.list.slice((this.listQuery.page - 1) * this.listQuery.limit, this.listQuery.page * this.listQuery.limit);

这里有一个问题,因为我们第一次请求就已经拿到了所有的数据,所以在每次点击页码时就没必要再发送请求。这里我们可以用一个变量alllist来缓存表格数据,然后每次点击页码时先检查alllist是否为空,为空则发送请求请求表格数据;不为空则不发送请求,直接拿alllist里的值来处理。

在 data 里注册 alllist 变量后,getList() 方法如下:

getList(pagination) {
if (this.alllist) {
if (pagination) {
this.listQuery.page = pagination.page;
this.listQuery.limit = pagination.limit;
}
this.list = this.alllist.slice(
(this.listQuery.page - 1) * this.listQuery.limit,
this.listQuery.page * this.listQuery.limit
);
} else {
axios.get('/list', {
params: this.listQuery
}).then(response => {
this.alllist = response.value.list;
this.total = response.value.list.length;
this.list = this.alllist.slice(
(this.listQuery.page - 1) * this.listQuery.limit,
this.listQuery.page * this.listQuery.limit
);
});
}
}

其中,pagination 参数只有在点击页码的时候才会由 pagination 组件通过触发 myTable 组件的 pagination 事件传递过来。

vue2.0+Element UI 表格前端分页和后端分页的更多相关文章

  1. vue2.0 + Element UI + axios实现表格分页

    注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...

  2. vue2.0 + element ui 实现表格穿梭框

    element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...

  3. vue2.0+Element UI 实现动态表单(点击按钮增删一排输入框)

    对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,我之前没有看见,绕了很多弯路,这里针对点击按钮增删一排输入框的问题做一个总结. 效果图如下 存在一排必填的姓名与手机号, ...

  4. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  5. EasyUI表格DataGrid前端分页和后端分页的总结

    Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...

  6. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  7. django项目一 分页器(前端分页和后端分页区别)

    1. 客户信息展示 1. 母版和继承 {% extends 'layout'%} {% load static%} {% static '文件路径' %} block css js content 2 ...

  8. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  9. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

随机推荐

  1. Linux内存屏障浅析

    根据该文章整理 https://blog.csdn.net/myxmu/article/details/8035025 1 解决的问题 内存屏障主要解决了单处理器下的乱序问题和多处理器下的内存同步问题 ...

  2. mysql小白系列_06 备份与恢复

    1.使用mydumper工具全库备份. 1)源码编译安装 2)全库备份 2.误操作truncate table gyj_t1;利用mysqldump的备份和binlog日志对表gyj_t1做完全恢复. ...

  3. 常用的code snipper

    Xcode 10.2.1 版本,自动代码提示功能延迟很大,很多情况下代码提示甚至会无效,但是code snippet 唤起的响应很快,从提高效率的情况考虑,即使系统提供的代码提示制作成code sni ...

  4. Lowest Common Multiple Plus(hdu2028)

    思考: 乘法爆咋数据.把int换成unsigned就过了,同时%d换成%u.求最大公约数和最小公倍数. #include<stdio.h> int gcd(unsigned x, unsi ...

  5. SpringCloud(二)- Consul介绍、安装、使用

    唯能极于情,故能极于剑有问题或错误请及时联系小编或关注小编公众号 “CodeCow”,小编一定及时回复和改正,期待和大家一起学习交流 此文由四部分组成(Consul简介.安装.实操.总结),别着急,慢 ...

  6. iOS开发Runtime 方法替换

    通过#import <objc/runtime.h>我们可以找到: /** * Returns a specified instance method for a given class. ...

  7. 【JavaScript数据结构系列】00-开篇

    [JavaScript数据结构系列]00-开篇 码路工人 CoderMonkey 转载请注明作者与出处 ## 0. 开篇[JavaScript数据结构与算法] 大的计划,写以下两部分: 1[JavaS ...

  8. BZOJ1001 狼抓兔子 题解

    裸的最小割,转化成最大流即可. #include <bits/stdc++.h> int n,m; int S,T; int mincost; int head[6001000],tot= ...

  9. 使用jetty作为内嵌服务器启动项目

    http://blog.csdn.net/robinpipi/article/details/7557035 需求:把jetty作为内嵌的一个服务器,直接启动,web项目不用部署在应用服务器中.在网上 ...

  10. Chrome自带全网页截图

    1.等待网页打开完毕 2.组合键 ctrl+shift+i 打开开发者工具 3.按 ctrl+shift+p 调出一个面板 4.输出 full 5.在下一行出现 capture full size s ...