AntDesign vue学习笔记(八)Table服务端分页使用
本文是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服务端分页使用的更多相关文章
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- BootStrap table服务端分页
涉及到的内容: 1.bootstrap-table插件: 2.mybatisplus分页查询: 3.spring封装对象匹配bootstrap-table插件格式: 4.sql查询隐藏手机号中间四位. ...
- Netty学习笔记(二) 实现服务端和客户端
在Netty学习笔记(一) 实现DISCARD服务中,我们使用Netty和Python实现了简单的丢弃DISCARD服务,这篇,我们使用Netty实现服务端和客户端交互的需求. 前置工作 开发环境 J ...
- Kafka学习笔记2--Kafka的服务端配置
下载解压 kafka 后,在 kafka/config 下有 3 个配置文件与主题的生产.消费相关. server.properties--服务端配置 producer.properties--生产端 ...
- 《精通并发与Netty》学习笔记(02 - 服务端程序编写)
上节我们介绍了开发netty项目所必需的开发环境及工具的使用,这节我们来写第一个netty项目 开发步骤 第一步:打开https://search.maven.org 找到netty依赖库 第二步:打 ...
- 红帽学习笔记[RHCE]OpenLDAP 服务端与客户端配置
目录 OpenLDAP 服务端与客户端配置 关于LDIF 一个LDIF基本结构一个条目 属性 Object的类型 服务端 安装 生成证书 生成默认数据 修改基本的配置 导入基础数据 关于ldif的格式 ...
- AntDesign vue学习笔记(六)Table 显示图片
AntDeign官网上没有table动态绑定显示图片的示例,baidu上搜索出来的大部分都是React语法,无法使用. 经过摸索,实现方法如下:以显示一个图片,一个按钮为例(picurl是返回的jso ...
- AntDesign vue学习笔记(一)初始化项目
最近学习AntDesign组件使用,官方Pro例子集成度太高,不容易学习,将从最基础组件一个一个搭建. 1.创建Vue Cli项目 2.引入ant design组件 $ cnpm i --save a ...
随机推荐
- SpringMVC-拦截器做一个登录认证的小Demo
拦截器 拦截器的定义 处理器拦截器类似于servlet开发中的filter,用于对处理器进行预处理和后处理. 定义拦截器,实现HandlerInterceptor这个接口 接口的实现需要导入包impo ...
- 关于C++中使用++it还是it++的问题
我们经常使用for循环来遍历东西,循环变量可以前自增也可以后自增,发现对遍历结果没啥影响,但是该如何选择呢? 我们应该尽量使用前自增运算符而不是后自增运算符,即用 ++ Iter 代替 Iter++ ...
- qt 操作串口 QSerialPort
准备工作 *.pro中加入 QT += serialport 初始化 void MainWindow::initPort() { //读取串口信息 foreach (const QSerialPort ...
- JS引擎是如何工作的?从调用堆栈到Promise
摘要: 理解 JS 引擎运行原理. 作者:前端小智 原文:JS引擎:它们是如何工作的?从调用堆栈到Promise,需要知道的所有内容 Fundebug经授权转载,版权归原作者所有. 为了保证可读性,本 ...
- SpringBoot 整合websocket
1.MyWebSocket package org.hxm.webSocket; import java.io.IOException; import java.util.concurrent.Cop ...
- django framework插件使用1
安装 REST框架要求以下内容: Python(3.5.3.6.3.7) Django(1.11.2.0.2.1.2.2) pip install djangorestframework pip in ...
- Makefile 基础语法
1.. specify the directores , i not specified , search current directory put every folder into a list ...
- django-配置404页面
setting.py文件配置 # SECURITY WARNING: don't run with debug turned on in production! DEBUG = False ALLOW ...
- 【目录】Jmeter系列
为天地立心,为生民立命.为往圣继绝学,为万世开太平. ---<横渠四句>·张载 Jmeter(一)简介以及环境搭建 Jmeter(二)Jmeter目录介绍 Jmeter(三)Test-Pl ...
- wordpress怎么用AMP加速器呢
AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验.借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精 ...