Element-ui组件--pagination分页
一般写后台系统都会有很多的列表,有列表就相应的要用到分页,根据项目中写的几个分页写一下我对分页的理解,就当是学习笔记了。
这是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分页的更多相关文章
- element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- (Element UI 组件 Table)去除单元格底部的横线
Element UI 组件 Table 有一个属性 border,添加它可以增加纵向边框,但是无法控制横线边框,因此即使是最简单的 el-table,也会包含一个底部横线. 这个底部横线其实是一个 b ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue-cli按需引入Element UI组件
一.环境 使用vue-cli搭建的环境 二.安装 babel-plugin-component npm install babel-plugin-component -D 三.修改.babelrc文件 ...
- Element UI组件说明
-<el-card>-查询及展示列表页面-[v-show]属性控制显示隐藏-<el-card class="box-card" >-多标签页面-<el ...
- Element-ui组件--pagination分页的使用
一般在写前端页面时,经常会遇到分页这样的效果,element-ui中便有这样的插件,用vue框架使用的很方便,在此做一总结: <template> <div class=" ...
- element ui里面table分页,页数从0开始的怎么做?
需求: 后台请求的接口是从0页开始的,但是pagination是从1开始的,就是在点击pagination的第1页是后台转0 1首先在data里面定义为1,其他地方也是定义1 return { for ...
- vue问题五:element ui组件的开始时间-结束时间验证
<el-date-picker v-model="seach.before" type="date" placeholder="开始时间&quo ...
- 关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
随机推荐
- java基础:JDK环境安装
根据操作系统位数(32/64,一般64位向下兼容),项目要求版本,下载对应JDK安装包 配置环境变量 JAVA_HOME C:\Program Files\Java\jdk1.7.0_80 PATH ...
- spring aop xml中配置实例
http://blog.csdn.net/wangpeng047/article/details/8560694
- Python开发环境Wing IDE如何使用GTK和PyGObject
Wing IDE是一个集成开发环境,可用于编辑.测试和调试使用PyGObject为GTK编写的Python代码.Wing IDE提供自动完成.调用提示.一个强大的调试器,以及许多其他功能,可帮助用户编 ...
- springboot/springmvc转换器
常用的转换器 String转Date转换器(用于接受日期参数自动转换成Date类型便于后台数据处理) /** * 全局handler前日期统一处理 * @author zhanghang * @dat ...
- web service 对外发布一个hello world接口(入门)
1.写一个需要发布的接口 package com.hb; import javax.jws.WebParam; import javax.jws.WebService; @WebService pub ...
- 01、Spark安装与配置
01.Spark安装与配置 1.hadoop回顾 Hadoop是分布式计算引擎,含有四大模块,common.hdfs.mapreduce和yarn. 2.并发和并行 并发通常指针对单个节点的应对多个请 ...
- 【CCPC-Wannafly Winter Camp Day4 (Div1) H】命命命运(概率DP)
点此看题面 大致题意: 有\(6\)个人玩大富翁,共有\(n\)块地,进行\(500\)轮,已知每个人掷骰子掷出\(1\sim6\)的概率.当某人到达一块未被占领的地时,他可以占领它.求最后每个人占有 ...
- python 的矩阵运算——numpy
nbarray对象,就类似于C语言的数组!!! 一维数组: nbarray.array([]) 二维数组: nbarray.array([[],[]]) 数组大小: .shape 修改数组的排列: . ...
- 简单广搜,迷宫问题(POJ3984)
题目链接:http://poj.org/problem?id=3984 解题报告: 1.设置node结构体,成员pre记录该点的前驱. 2.递归输出: void print(int i) { ) { ...
- 表单(三):select
选择框的value属性 <select name='location' id='selLocation'> <option value='Sunnyvale,Ca'>Sunny ...