本文是AntDesign后端分页方法

1、设置pagination

 <a-table :columns="columns" :dataSource="data" :rowSelection="rowSelection" :pagination="pagination">
<a slot="action" href="javascript:;">查看</a>
<img style="width:20px;heigth:20px" slot="pic" slot-scope="text" :src=text />
</a-table>

2、自定义pagination,注意写成onChange,change不行,灰色部分请根据自己实际代码修改。

  data () {
let self = this
return {
collapsed: false,
data,
sels,
columns,
rowSelection,
pagination: {
pageNo: 1,
pageSize: 20, // 默认每页显示数量
showSizeChanger: true, // 显示可改变每页数量
pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
showTotal: total => `Total ${total} items`, // 显示总数
onShowSizeChange: (current, pageSize) => this.pageSize = pageSize, // 改变每页数量时更新显示
onChange:(page,pageSize)=>self.changePage(page,pageSize),//点击页码事件
total:0 //总条数
}
}
},

3、Ajax读取数据列表时pagination.total赋总条数即可

.then((response) => {
that.data = response.data.items
that.pagination.total=response.data.totalNum
console.log(response)
})

4、这样就会自动分页了

5、读取数据时带上当前页、分页大小,过滤条件,后端代码可以简单使用通用分页方法返回Json数据即可,

    searchUser () {
let filter= {userName:this.queryParam.userName,curPage:this.pagination.pageNo,pageSize:this.pagination.pageSize};
console.log(filter)
this.getUser(filter)
},

getUser是Post和读取返回数据的方法,不再粘贴

6、在SizeChange、Change、搜索按钮事件里调用searchUser方法就可以了。

AntDesign vue学习笔记(八)Table服务端分页使用的更多相关文章

  1. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  2. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  3. BootStrap table服务端分页

    涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...

  4. Netty学习笔记(二) 实现服务端和客户端

    在Netty学习笔记(一) 实现DISCARD服务中,我们使用Netty和Python实现了简单的丢弃DISCARD服务,这篇,我们使用Netty实现服务端和客户端交互的需求. 前置工作 开发环境 J ...

  5. Kafka学习笔记2--Kafka的服务端配置

    下载解压 kafka 后,在 kafka/config 下有 3 个配置文件与主题的生产.消费相关. server.properties--服务端配置 producer.properties--生产端 ...

  6. 《精通并发与Netty》学习笔记(02 - 服务端程序编写)

    上节我们介绍了开发netty项目所必需的开发环境及工具的使用,这节我们来写第一个netty项目 开发步骤 第一步:打开https://search.maven.org 找到netty依赖库 第二步:打 ...

  7. 红帽学习笔记[RHCE]OpenLDAP 服务端与客户端配置

    目录 OpenLDAP 服务端与客户端配置 关于LDIF 一个LDIF基本结构一个条目 属性 Object的类型 服务端 安装 生成证书 生成默认数据 修改基本的配置 导入基础数据 关于ldif的格式 ...

  8. AntDesign vue学习笔记(六)Table 显示图片

    AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用. 经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的jso ...

  9. AntDesign vue学习笔记(一)初始化项目

    最近学习AntDesign组件使用,官方Pro例子集成度太高,不容易学习,将从最基础组件一个一个搭建. 1.创建Vue Cli项目 2.引入ant design组件 $ cnpm i --save a ...

随机推荐

  1. QGraphicsItem鼠标旋转控制研究

    在QT场景视图中2D图形项Item的基类为QGraphicsItem,如果我们需要自定义Item则可以从其派生,然后重写boundingRect以及paint虚函数实现图形项的外边界定义以及内容绘制工 ...

  2. 破解压缩包的几种方式(zip伪加密 爆破 CRC32碰撞 已知明文攻击)

    zip伪加密 zip文件是由3部分组成,详见文末 压缩源文件数据区+压缩源文件目录区+压缩源文件目录结束标志 在压缩源文件数据区有个2字节的 全局方式位标记 ,在压缩源文件目录区也有个2字节的 全局方 ...

  3. django rest_framework 实现用户登录认证

    django rest_framework 实现用户登录认证 1.安装 pip install djangorestframework 2.创建项目及应用 创建过程略 目录结构如图 3.设置setti ...

  4. ORM之EF初识

    之前有写过ef的codefirst,今天来更进一步认识EF! 一:EF的初步认识 ORM(Object Relational Mapping):对象关系映射,其实就是一种对数据访问的封装.主要实现流程 ...

  5. 利用mycat读写分离搭建wordpress博客网站

    实验环境 以下配置都是建立在mariadb主从没有问题的情况下: .三台主机:在三台机器/etc/hosts添加以下3条主机信息(mycat和wordpress在一台机器上面) mycat:192.1 ...

  6. Go如何使用数据库、缓存

    database/sql 接口 Go官方没有提供数据库驱动,而是为开发数据库驱动定义了一些标准接口database/sql,开发者可以根据定义的接口来开发相应的数据库驱动,这样做有一个好处,只要是按照 ...

  7. 用 Splashtop Wired XDisplay HD 让 ipad做电脑扩展屏幕__亲测有效

    参考: [1]https://blog.csdn.net/Tang_Chuanlin/article/details/86433152

  8. 3.创建Manager类,演示对TestUser进行增删改查功能

    接上一篇文章 创建NHibernateHelper帮助类,生成sessionFactory http://www.cnblogs.com/fzxiaoyi/p/8443587.html 创建个新的类M ...

  9. BZOJ4241:历史研究(回滚莫队)

    题意:给定N个数字,Q次询问,询问这个区间的最大加权众数是多少. 加权众数是指出现次数*数字大小.N,Q<1e5. 思路:不难发现可以N*sqrtN*logN的思路做,但是应该过不了. 这个Ns ...

  10. 2019 Nowcoder Multi-University Training Contest 4 E Explorer

    线段树分治. 把size看成时间,相当于时间 $l$ 加入这条边,时间 $r+1$ 删除这条边. 注意把左右端点的关系. #include <bits/stdc++.h> ; int X[ ...