elementui中 分页在vue中的使用
template中:
<el-pagination background layout="prev, pager, next"
:total="total"
:page-size ="per_page"
:current-page="currentPage"
@current-change="current_change"
></el-pagination>
script中:
data(){
return {
total:0, //总条数
currentPage:1, //当前页
per_page: 0, //每页几条数据
}
}, // 分页
current_change(currentPage){ //改变当前页
this.currentPage = currentPage;
this.init(this.currentPage) //请求的接口传入分页
},
另外:改变分页的按钮颜色和大小的方法
>>>.el-pager li{
width: 36px;
height: 36px;
line-height: 36px;
}
>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #0C9F9A!important;
width: 36px;
height: 36px;
line-height: 36px;
}
/* .el-pager */
>>>.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
height: 36px;
min-width: 36px;
}
>>>.el-pagination.is-background .btn-prev, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li{
height: 36px;
min-width: 36px;
}
elementui中 分页在vue中的使用的更多相关文章
- vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...
- vue中使用localStorage存储信息
一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- vue中的修饰符
Vue2.0学习笔记:Vue事件修饰符的使用 事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理 ...
- vue中前端弹窗队列展示
在前端写一个弹窗可能很简单,那如果同时有多个弹窗呢 这样的话就要考虑弹窗的展示问题,肯定是不能叠加在一起的,这时候就要通过队列(先进先出)来展示 思路就是根据队列来实现,至于具体的实现方式,可以在项目 ...
- 详解Vue中的computed和watch
作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果
你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...
- vue中使用elementUI
引入Element 因为整个项目是依赖ElementUI框架做的,所以采用了全部引入 1,在项目根目录执行命令:npm i element-ui -S进行安装 2,在main.js中引入element ...
- Django day 33 vue中使用element-ui的使用,课程的相关介绍,vue绑定图片,课程列表接口,课程详情页面
一:vue中使用element-ui的使用, 二:课程的相关介绍, 三:vue绑定图片, 四:课程列表接口, 五:课程详情页面
随机推荐
- 「Chroot环境」Debian Testing amd64 on arm64
这个是适用于ARM64环境的AMD64 Debian Testing系统.基于FEX转译.这个系统运行在ARM64的手机和电脑上,运行的软件是AMD64(X64)格式.下载链接提供桌面版和基础版.适用 ...
- 集合框架——LinkedList集合源码分析
目录 示例代码 底层代码 第1步(初始化集合) 第2步(往集合中添加一个元素) 第3步(往集合中添加第二个元素) 第4步(往集合中添加第三个元素) LinkedList添加元素流程示意图 第5步(删除 ...
- C++实现双向RRT算法
C++实现双向RRT算法 背景介绍 RRT(Rapidly-exploring Random Trees)是Steven M. LaValle和James J. Kuffner Jr.提出的一种通过所 ...
- PHP全栈开发(六):PHP与HTML页面交互
之前我们在HTML表单学习这篇文章里面创建了一个HTML页面下的表单. 这个表单是用户用来输入数据的 具体代码如下 <!DOCTYPE html> <html> <hea ...
- NVIDIA Isaac Gym安装与使用
NVIDIA做的Isaac Gym,个人理解就是一个类似于openai的Gym,不过把环境的模拟这个部分扔到了GPU上进行,这样可以提升RL训练的速度. 官网:https://developer.nv ...
- Vue中、参数传递以及重定向
1.参数传递 关键部分代码 1.参数传递 <router-link :to="{name:'information',params:{id:1}}">用户信息</ ...
- 知识图谱-生物信息学-医学顶刊论文(Bioinformatics-2021)-KG4SL:用于人类癌症综合致死率预测的知识图神经网络
5.(2021.7.12)Bioinformatics-KG4SL:用于人类癌症综合致死率预测的知识图神经网络 论文标题:KG4SL: knowledge graph neural network f ...
- 利用inotify和rsync服务实现数据实时同步
文件定时同步的实现: 利用rsync结合cron计划任务实现: rsync -av --delete /data/ 10.0.0.12:/back -a:保留文件属性 -v:显示过程 -delete: ...
- vs 自定义代码块
代码自动生成,让代码飞~ 我目前用的是vs2013,c,c++用的多,vs自带了一套代码块规则,下面我们就以for举例子. 1 原生代码块怎么使用 输入for后按Tab键: 这时候可以修改 size_ ...
- k8s 中的 ingress 使用细节
k8s中的ingress 什么是ingress Ingress 如何使用 ingress 使用细节 参考 k8s中的ingress 什么是ingress k8s 中使用 Service 为相同业务的 ...