vue中使用elementUi (分页器的使用)
2023-09-11 14:19:39 时间
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笔记:vue-router
- Vue笔记:vue项目引入bootstrap、elementUI、echarts
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue+ElementUI项目使用webpack输出MPA【华为云分享】
- Vue -> 解决 vue-ueditor-wrap 不能显示的问题
- 在Vue使用NProgress加载进度条
- VUE中使用ElementUi的Message弹窗提示
- vue框架-基础4-vue-使用vue-cli工具
- vue解决IOS10低版本白屏问题
- thinkphp6:前后端分离使用表单令牌(php 8.1.1 / thinkphp v6.0.10LTS/vue 3.2.26)
- 一个典型的Vue应用的App.vue
- standalone vue initialization process - Vue应用的初始化过程
- vue项目elementui 的 el-checkbox复选框改成单选框样式:实现全选、全否、单选、反选功能(最简单的方法)
- 运行vue项目eslint 校验错误
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue品牌列表案例demo
- vue脚手架搭建报错:vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOU
- Vue中引入echarts。
- vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)
- 在vue中引入elementui
- vue中如何将 json 格式化展示在页面中?
- Vue、Vuejs从入门到精通 | vue-router详解
- 188: vue+openlayers上传GeoJSON文件,导出CSV格式文件
- 105:vue+openlayers 引用组件来添加marker (示例代码)
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(一)vue 概述与用法、MVVM、绑定语法、vue 指令
- vue本地存储、获取自定义data-id、获取链接url参数、页面跳转返回、修改页面title
- 【表格动态列】Vue + ElementUI实现表格多行表头以及表格动态列的功能
- Vue的生命周期函数
- Vue的基本组件2(show,bind)