element ui 分页
修改选中页码的样式:
.el-pager .active{
color:red !important;//选中
}
.el-pager .number:hover{
color:red !important;//移动
}
使用:
<template>
<div class="block">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@prev-click="prev"
@next-click="next"
:current-page="当前所在的页面"
:page-sizes="[5, 15, 30, 50,75,100]"
layout="total, sizes, prev, pager, next, jumper"
:total="总条数">
</el-pagination>
</div>
</template>
//选择显示条数
handleSizeChange(num){
console.log(num)
},
//选择去往的页数
handleCurrentChange(num){
console.log(num)
},
//上一页
prev(num){}
//下一页
next(num){}
element ui 分页的更多相关文章
- element ui 分页记忆checked
<el-table :data="tableData" border ref="multipleTableChannel" @selection-chan ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue2.0 + Element UI + axios实现表格分页
注:本文分页组件用原生 html + css 实现,element-ui里有专门的分页组件可以不用自己写,详情见另一篇博客:https://www.cnblogs.com/zdd2017/p/1115 ...
- element UI 饿了么 UI 分页 按钮不显示的问题
https://blog.csdn.net/sinat_37255207/article/details/88914235 一个很坑的 深坑 element UI 的 按钮 不显示的深坑 <e ...
- element UI table 过滤 筛选问题
一.问提描述 使用elementUI table 官方筛选案例,发现筛选不是服务器端筛选,而是浏览器端对每一页进行单独筛选. 如何在服务器端筛选? 二.查询Element UI 官网table组 ...
- Element UI样式无法修改解决方法。
最近在做的项目中要用到Element UI组件来写,非常方便,但毕竟Element UI是有它自己的默认样式的,并不是客户所要求的,但就在我想要修改样式时遇到了棘手的问题. 如何引入和使用 Eleme ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue-cli 3.0 豆瓣api接口使用element做分页
记录自己的学习 大佬绕道谢谢! 豆瓣即将上映接口:https://api.douban.com/v2/movie/coming_soon 本地跨域问题 看我之前的文章:https://www.cnbl ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- vue实现多语言国际化(vue-i18n),结合element ui、vue-router、echarts以及joint等。
老板说我们的项目要和国际接轨,于是乎,加上了多语言(vue-i18n).项目用到的UI框架是element ui ,后续echarts.joint等全都得加上多语言. 一.言归正传,i18n在vue项 ...
随机推荐
- Mybatisplus-Generator代码生成器-简单示例
简单示例 import com.baomidou.mybatisplus.annotation.FieldFill; import com.baomidou.mybatisplus.annotatio ...
- vue 数组对象深拷贝 并根据某项属性排序
vue 数组对象深拷贝 并根据某项属性 serialNumber 排序 原始数据 navListData: [ { name: '企业速览', isHot: false, isVip: fals ...
- git远程分支回退到某个版本
1.找到要回退的版本号(右击项目--> Git --> Show History -->选中要回退的版本-->Copy Revision Number): 2.打开idea的T ...
- 来自StateOfJS调查:2022年JavaScript生态圈趋势报告(前端早读课)
原文 我这里记录些觉得有趣的. Promise.allSettled() 完成所有输入的方法,no matter what,返回对应的状态和值/原因,这对想知道所有返回状态的业务很好用:使用async ...
- Spring不同版本的AOP
1.Spring4.SpringBoot1 1.1 代码实现 public interface Calculator { int div(int a,int b); } @Component publ ...
- 【PS】PS如何扩展画布?
[PS]PS如何扩展画布? 选择裁剪,拉伸图片 选择上方工具栏的勾 即可扩展图片
- springcloud(六) - 配置中心
功能介绍 设置和业务代码获取配置 功能实现 <!-- 添加configjar --> <dependency> <groupId>org.springframewo ...
- 【Asp.net】服务器控件<asp:TextBox ></TextBox>如何变为多文本控件
废话不多说,直接上图! 在TextBox上增加TextModel="MultiLine"即可!
- centos7上搭建Jenkins环境
选择在centos 上安装jdk和tomcat来搭建Jenkins 1.jdk安装 查看有没有java环境:rpm -qa | grep java 如果没有java环境的话,接着就去查找java-1. ...
- Winform帮助文档(C#打开chm定位到特定页面)国内最全总结写法。原文文档带翻译
下面比较啰嗦,只一句即可:Help.ShowHelp(null,"C:\help.hcm", HelpNavigator.Topic,"index.htm")方 ...