Element UI 分页器

人是为活着本身而活着，而不是为了活着之外的任何事物所活着。-- 余华《活着》

安装 Element UI

npm i element-ui -S

引入组件

import { Pagination } from 'element-ui'

注册组件

Vue.use(Pagination)

搭建组件

<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage4":page-sizes="[4, 8, 12, 16]":page-size="4"layout="total, sizes, prev, pager, next, jumper":total="total">
</el-pagination>

声明变量

data() {return {currentPage4: 1, // 当前页，默认第一页total: 0, // 总条数初始化0条contentList: '' // 内容}},

初始化请求数据

created() {// 初始化获取第一页内容getInformationList({ pageNum: this.currentPage4 }).then((res) => {console.log(res)this.total = res.totalthis.contentList = res.rows })},

切换页码实现分页功能

    // 分页功能handleSizeChange(val) {console.log(`每页 ${val} 条`)},handleCurrentChange(val) {console.log(`当前页: ${val}`)this.currentPage4 = valgetInformationList({ pageNum: this.currentPage4 }).then((res) => {console.log(res)this.total = res.totalthis.contentList = res.rows})}

Element UI 分页器相关推荐

element ui分页器
使用element ui+vue2结合表格实现分页器因为要重构后台,所以选择了element ui+vue2来重构,然后遇到了表格数据进行分页我认为实现分页最重要的两个点第一,数据的绑定 :da ...
vue使用element ui实现下拉列表分页的功能！！！
" 大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂. " 前几天做了个功能,需求是使用利用element ui如何给下拉列表分页,经过网上查找,自己摸索,已经完成,今天来记录一 ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
目录交易页面提交订单支付页面微信支付个人中心我的订单交易页面 1.静态组件及路由跳转 2.获取交易页数据 (1)接口 //获取用户地址信息地址:/api/user/userAddres ...
Element UI库的入门使用
Element UI 有的 ul 库在 style 上添加 scoped 后可能会导致自定义样式失效.element ui 可以支持 scoped 多用于管理系统的开发,有明确设计稿的情况下一般不方便 ...
charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用参考文章: (1)vue的$nextTi ...
vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...

Element UI 分页器

Element UI 分页器相关推荐

最新文章

热门文章