element ui分页器的使用
<el-pagination
layout="total, prev, pager, next, jumper"
:current-page="pageInfo.page"
@current-change="onPageChange"
:total="totalElementsData">
</el-pagination>
current-page表示的是当前的页数,就传data里面定义的就好,total表示的是总页数,current-change表示的是分页时候的事件
pageInfo: {
page: 1,
size: 10,
},
totalElementsData:0,
onPageChange (page) {
this.pageInfo.page = page
this.fetchData()
},
fetchData (data = {}) {
this.listLoading = true
setTimeout(() => {
this.listLoading = false
}, 20000)
this.criteria.page = this.pageInfo.page
this.criteria.size = this.pageInfo.size
var { name,contact, createStart,createEnd, checkStart,checkEnd, status ,page, size} = this.criteria
var params ={ name, contact, createStart, createEnd, checkStart, checkEnd, status,page, size}
fetchBusiness.cashManageData(params).then(res => {
this.loading = false
if (res.status === 200) {
this.listLoading = false
this.getCashList = res.data.data.content
this.totalElementsData = +res.data.data.totalElements //这里获取totalElementsData数据
} else {
this.$message({
message: res.data.message,
duration: 3000
})
}
})
},
element ui分页器的使用的更多相关文章
- 使用element ui 日期选择器获取值后的格式问题
一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】
element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- Element UI——本地引入iconfont不显示
前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...
- Html | Vue | Element UI——引入使用
前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- 上传图片组件封装 element ui
// element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...
- vue项目使用element ui的Checkbox
最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...
随机推荐
- Matlab原型模式
原型(Prototype)模式的定义如下:用一个已经创建的实例作为原型,通过复制该原型对象来创建一个和原型相同或相似的新对象.Matlab面向对象编程有两种类,一种是Value Class,一种是Ha ...
- string 转stream和stream转string
string test = “Testing 1-2-3″; // convert string to stream MemoryStream stream = new MemoryStream(); ...
- Vue.js详解
vuejs介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能 ...
- js跳出循环的方法区别(break,continue,return)(转载)
转自:http://blog.csdn.net/fxss5201/article/details/52980138 js编程语法之break语句: break语句会使运行的程序立刻退出包含在最内层的循 ...
- jQuery知识梳理20190817
目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...
- opencv——图像掩码操作
使用opencv通过掩码去扣取图像中感兴趣的区域 步骤: 1.读取一张图片 2.转换颜色格式为hsv 3.设置要扣取区域颜色的上下门限 4.从原始图像中获取感兴趣区域的掩码 5.使用掩码和原始图像做云 ...
- PCB板信号完整性分析的操作步骤及设置方法
AD16的主要功能是画电路原理图和根据电路原理图设计PCB板.为了使设计的电路.画完的电路原理图,从电路原理上不存在错误,从电路逻辑上不存在混乱,AD16专门开发了电路原理图的仿真程序.这样可以把设计 ...
- Pthon面向对象-特殊属性
Pthon面向对象-特殊属性 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.特殊属性 #!/usr/bin/env python #_*_conding:utf-8_*_ ...
- spring cloud (八) Config client 和项目公共配置
1 pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...
- Windows环境下安装和使用nginx1.16.0
nginx是一款开源的HTTP服务器和反向代理服务器,nginx可以作为Web服务器提供HTTP访问功能,类似于Apache.IIS等.目前nginx已经在国内外很多网站作为Web服务器或反向代理服务 ...