vue中使用elementUi (分页器的使用)
1、安装
npm i element-ui -S
2、在main.js中引入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI)
中文文档地址:
http://element-cn.eleme.io/#/zh-CN/component/quickstart
分页器的使用:
<template>
<div class="paginationBox">
<div class="block">
<span class="demonstration">大于 7 页时的效果</span>
<el-pagination
background
:page-sizes="[5, 10, 15, 20]"
:page-size="10"
:pager-count="11"
layout="sizes,prev, pager, next,jumper"
:current-page="currentPage"
hide-on-single-page
@size-change="sizePageChange"
@current-change="currentChange"
@prev-click="pre"
@next-click="next"
:total="1000">
</el-pagination>
</div> </div>
</template> <script>
export default {
data(){
return{
currentPage:3
}
},
methods:{
sizePageChange(curSize){
console.log(curSize)
},
currentChange(cpage){
this.currentPage=cpage;
console.log(this.currentPage)
},
pre(cpage){
console.log(cpage)
},
next(cpage){
console.log(cpage)
}
}
}
</script> <style scoped> </style>
注意:绑定的事件后不要跟括号,要不没有默认参数。。。
不过:pager-count="11"和total一起用的话,会报个错,所以我只用了total 为了适配移动端,把small页用上了
vue中使用elementUi (分页器的使用)的更多相关文章
- Django day 33 vue中使用element-ui的使用,课程的相关介绍,vue绑定图片,课程列表接口,课程详情页面
一:vue中使用element-ui的使用, 二:课程的相关介绍, 三:vue绑定图片, 四:课程列表接口, 五:课程详情页面
- 在vue中使用ElementUI
完整引用ElementUI: 安装:在需要使用到的vue项目目录下,使用npm下载安装: npm/cnpm i element-ui -S/--save <!-- 引入样式 --> < ...
- vue中对element-ui框架中el-table的列的每一项数据进行操作
vue中使用element table,表格参数格式化formatter 后台返回对应的数字, 那肯定不能直接显示数字,这时候就要对 表格进行数据操作 如图: 代码: methods: { //状态改 ...
- vue中使用elementUI
引入Element 因为整个项目是依赖ElementUI框架做的,所以采用了全部引入 1,在项目根目录执行命令:npm i element-ui -S进行安装 2,在main.js中引入element ...
- 在vue中使用Element-UI
Element-UI是一套基于Vue2.0的UI组件库,http://element.eleme.io/#/zh-CN/component/carousel 首先npm install element ...
- vue 中 使用 element-ui 发送请求前 校验全部表单,报警告: [Element Warn][Form]model is required for validate to work!
WEB先生 2020-07-14 20:01:45 754 收藏 分类专栏: vue 文章标签: vue js 版权 报这种错可能有以下两种情况 1.属性绑定错误,确保绑定的是 :model ...
- 在vue中引入elementui
文章目录 1.下载安装 2.在main.js中引入 3.可以根据封装好的组件自行调用 官网地址:https://element.eleme.cn/#/zh-CN 1.下载安装 npm i elemen ...
- vue中使用element-ui自定义主题后,vue-cli跑不起来了
环境:vue-cli 2.x版本 自己在官网配置了主题并放到了项目中https://element.eleme.cn/#/zh-CN/theme 然后,我的脚手架在我的电脑中休息了几天,就跑不通了呢! ...
- 在vue中使用elementUI饿了么框架使用el-tabs,切换Tab如何实现实时加载,以及el-table表格使用总结
当我们在开发中遇到tab切换,这时候用el的el-tabs感觉很方便 但当我在把代码都写完后,发现一个问题就是页面打开时 虽然我们只能看见当前一个tab页,但是vue会帮你把你写的所有tab页的内容都 ...
随机推荐
- jenkins 设置中文显示
这里使用的方法是安装中文语言包,安装的插件名称是:Localization: Chinese (Simplified) 1.在插件管理,搜索 Localization: Chinese (Simpli ...
- 区间dp 括号匹配问题
这道题目能用区间dp来解决,是因为一个大区间的括号匹配数是可以由小区间最优化选取得到(也就是满足最优子结构) 然后构造dp 既然是区间类型的dp 一般用二维 我们定义dp[i][j] 表示i~j这个区 ...
- 移动端真机debug调试神器 vConsole学习(一)之基础
参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...
- java字符常量
在Java程序中经常会遇到类似于"Hello"这样地字符串,那么这种类型的字符串是Java中是如何存储,下面就说明字符串常量在内存中存储方式: Java程序在编译时会将程序中出现的 ...
- oracle解锁
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...
- C语言的宏macro的使用
C's Macro Introduction 1.The Connect Macros: ## 这是一个预处理连接符,这个操作符主要用来将两个符号连接成为一个完整的宏符号.通过下面的代码,可以看到其具 ...
- 迭代器遍历【List、Set、Map】
迭代器遍历[List.Set.Map] example package boom.collection; import java.util.ArrayList; import java.util.Ha ...
- 并发编程:生产消费模型、死锁与Rlock、线程、守护线程、信号量、锁
一.生产者消费者模型1 二.生产者消费者模型2 三.守护线程 四.常用方法 五.启动线程的另一种方式 六.锁 七.锁死 八.死锁 九.单个锁能不能死锁 十.信号旗 一.生产者消费者模型1 import ...
- Linux下周期性查看GPU状态
Linux下周期性查看GPU状态 NVIDIA自带了nvidia-smi命令来查看GPU的使用情况 了解一下watch命令 $ whatis watch watch (1) - execute a p ...
- sql like 拼接字符串模糊查询
这种分割的值大家常用,如果要用like 来查询包含2,这个值的数据有哪些,这个怎么查? like '%2%' ????,这是不行的如果是 44,125,687 同样可以查出来,那么就想到通配符, l ...