一般写后台系统都会有很多的列表,有列表就相应的要用到分页,根据项目中写的几个分页写一下我对分页的理解,就当是学习笔记了。

这是Element-ui提供的完整的例子

<template>  <div class="block">   
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[100, 200, 300, 400]"//这事下拉框可以选择的,选择一夜显示几条数据
:page-size="100" //这是当前煤业显示的条数
layout="total, sizes, prev, pager, next, jumper"
:total="400" //这个是总共有多少条数据,把后台获取到的数据总数复制给total就可以了
>
</el-pagination>
</div>
</template>
<script>
export default {
methods: {
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
}
},
data() {
return {
total:'0',
currentPage: 4
};
}
}
</script>

以下是我自己在项目中用到的分页

<div style="float:right;margin-top:20px;">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[5, 10, 20, 30]"
:page-size="pageSize" //写代码时忘记把pageSize赋值给:page-size了,
       layout="total, sizes, prev, pager, next, jumper" 
      :total="totalCount">
    </el-pagination>
</div>

没什么好的内容,就是给自己做个学习笔记吧

Element-ui组件--pagination分页的更多相关文章

  1. element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  2. (Element UI 组件 Table)去除单元格底部的横线

    Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...

  3. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  4. vue-cli按需引入Element UI组件

    一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...

  5. Element UI组件说明

    -<el-card>-查询及展示列表页面-[v-show]属性控制显示隐藏-<el-card class="box-card" >-多标签页面-<el ...

  6. Element-ui组件--pagination分页的使用

    一般在写前端页面时,经常会遇到分页这样的效果,element-ui中便有这样的插件,用vue框架使用的很方便,在此做一总结: <template> <div class=" ...

  7. element ui里面table分页,页数从0开始的怎么做?

    需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...

  8. vue问题五:element ui组件的开始时间-结束时间验证

    <el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...

  9. 关于Element UI中select组件中遇到的问题

    问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...

随机推荐

  1. java基础:JDK环境安装

    根据操作系统位数(32/64,一般64位向下兼容),项目要求版本,下载对应JDK安装包 配置环境变量 JAVA_HOME C:\Program Files\Java\jdk1.7.0_80 PATH ...

  2. spring aop xml中配置实例

    http://blog.csdn.net/wangpeng047/article/details/8560694

  3. Python开发环境Wing IDE如何使用GTK和PyGObject

    Wing IDE是一个集成开发环境,可用于编辑.测试和调试使用PyGObject为GTK编写的Python代码.Wing IDE提供自动完成.调用提示.一个强大的调试器,以及许多其他功能,可帮助用户编 ...

  4. springboot/springmvc转换器

    常用的转换器 String转Date转换器(用于接受日期参数自动转换成Date类型便于后台数据处理) /** * 全局handler前日期统一处理 * @author zhanghang * @dat ...

  5. web service 对外发布一个hello world接口(入门)

    1.写一个需要发布的接口 package com.hb; import javax.jws.WebParam; import javax.jws.WebService; @WebService pub ...

  6. 01、Spark安装与配置

    01.Spark安装与配置 1.hadoop回顾 Hadoop是分布式计算引擎,含有四大模块,common.hdfs.mapreduce和yarn. 2.并发和并行 并发通常指针对单个节点的应对多个请 ...

  7. 【CCPC-Wannafly Winter Camp Day4 (Div1) H】命命命运(概率DP)

    点此看题面 大致题意: 有\(6\)个人玩大富翁,共有\(n\)块地,进行\(500\)轮,已知每个人掷骰子掷出\(1\sim6\)的概率.当某人到达一块未被占领的地时,他可以占领它.求最后每个人占有 ...

  8. python 的矩阵运算——numpy

    nbarray对象,就类似于C语言的数组!!! 一维数组: nbarray.array([]) 二维数组: nbarray.array([[],[]]) 数组大小: .shape 修改数组的排列: . ...

  9. 简单广搜,迷宫问题(POJ3984)

    题目链接:http://poj.org/problem?id=3984 解题报告: 1.设置node结构体,成员pre记录该点的前驱. 2.递归输出: void print(int i) { ) { ...

  10. 表单(三):select

    选择框的value属性 <select name='location' id='selLocation'> <option value='Sunnyvale,Ca'>Sunny ...