<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分页器的使用的更多相关文章

  1. 使用element ui 日期选择器获取值后的格式问题

    一般情况下,我们需要给后台的时间格式是: "yyyy-MM-dd" 但是使用Element ui日期选择器获取的值是这样的: Fri Sep :: GMT+ (中国标准时间) 在官 ...

  2. element ui 1.4 升级到 2.0.11

    公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...

  3. [坑况]饿了么你是这样的前端——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/ ...

  4. Vue + Element UI项目初始化

    1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...

  5. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  6. Html | Vue | Element UI——引入使用

    前言 做个项目,需要一个效果刚好Element UI有,就想配合Vue和Element UI,放在tp5.1下使用,但是引入在线的地址各种报错,本地引入就完美的解决了问题! 代码 __STATIC_J ...

  7. 分享一个自搭的框架,使用Spring boot+Vue+Element UI

    废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...

  8. 上传图片组件封装 element ui

    // element ui 文档地址: http://element.eleme.io/#/zh-CN <template> <div> <div class=" ...

  9. vue项目使用element ui的Checkbox

    最近使用到element ui的下拉多选框Checkbox Checkbox用法可参考与于 http://element.eleme.io/#/zh-CN/component/checkbox Che ...

随机推荐

  1. vue创建项目(推荐)

    上一节我们介绍了vue搭建环境的情况,并使用一种方式搭建了一个项目,在这里为大家推荐另一种创建项目的方式. vue init webpack-simple vuedemo02 cd vuedemo02 ...

  2. JS基础理论相关知识

    1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.XHTML 元素必须被关闭.标签名必须用 ...

  3. Java 之 MyBatis(一)入门

    一.Mybatis 框架概述 (1)mybatis 是一个优秀的基于 java 的持久层框架,它内部封装了 jdbc,使开发者只需要关注 sql 语句本身,而不需要花费精力去处理加载驱动.创建连接.创 ...

  4. SOFABoot&SOFATracer

    SOFABoot快速开始 SOFABoot介绍 SOFABoot 是蚂蚁金服开源的基于 Spring Boot 的研发框架,它在 Spring Boot 的基础上,提供了诸如 Readiness Ch ...

  5. tcp校验和

    伪首部(pseudo header),通常指TCP伪首部和UDP伪首部 TCP的校验和是必需的,而UDP的校验和是可选的 TCP校验是需要校验包头和数据的 //共12字节 typedef struct ...

  6. C#中多集合组合实现

    C#中多集合组合使用方法,主要用到 Enumerable.Join方法 var skuInfoList = new Dictionary<int, List<long>>(); ...

  7. list集合排序案例

    // List集合排序: Collections.sort(list, new Comparator<Object>(){ public int compare(Object obja, ...

  8. 记一次至今懵逼的bug

      <update id="falseDeleteBatchByPKArr" parameterType="java.lang.String"> U ...

  9. JAVA-JNI调用使用

    准备工作: 1.打开eclipse,新建c++项目,编写c++ jni接口如下图: 2.编译运行生成dll文件,导入到java项目,在java中创建调用使用,如下图: C文件定义: 头文件 /* DO ...

  10. 详解shell脚本括号区别--$()、$「 」、$「 」 、$(()) 、「 」 、「[ 」]

    概述 很多时候我们在写shell脚本的时候总会碰到不同的括号,那么这些不同的括号有什么区别呢? $() 用于命令交换 说明:平时脚本用的``符号也是用于命令交换的哦,和$() 的操作是一样的 ${ } ...