<!--分页组件-->
<el-pagination
:total="total"
:current-page="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20, 30, 50]"
:pager-count="5"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
background
layout="total, sizes, prev, pager, next">
</el-pagination>
<script>
export default {
data(){
return {
total: 0,
currentPage: 1,
pageSize:10,
loading: false,
searUser: {},
tableData:[]
}
},
methods:{
select_user(){
this.loading = true; this.searUser.currentPage = this.currentPage;
this.searUser.pageSize = this.pageSize; this.$axios.get('/api/users/search',{params:this.searUser})
.then(res => {
this.loading = false; window.console.log(JSON.stringify(res)); this.tableData = res.data.records; this.total = res.data.total; }).catch(err => {
this.loading = false;
this.$message.error(err);
});
}, handleCurrentChange(val){
this.currentPage = val; this.select_user();
}, handleSizeChange(val){
this.pageSize = val;
}
}
}
</script>

效果:

vue-cli3 element 分页组件el-pagination的基本使用的更多相关文章

  1. Vue 实现一个分页组件

    实现分页组件要分三个部分 样式,逻辑,和引用 首先新建一个vue文件用来承载组件内容 第一步:构建样式 <template> <nav> <ul class=" ...

  2. Element分页组件prev-text和next-text属性无效?

    前情提要 /(ㄒoㄒ)/~~ 作为刚刚接触 Element 组件的人来说,看文档是第一步,但是当我想要修改分页组件里面的按钮时却遇到了问题. 文档中写到是需要给 prev-text 和 next-te ...

  3. 解决element 分页组件,搜索过后current-page 绑定的数据变了,但是页面当前页码并没有变的问题

    前言上一篇写前台解决分页问题的时候没有这个问题,但是在实际项目后台中有遇到过,所以在这里专门说一下,如果参考前台分页出现这种问题了,也可以使用这种方法!bug:vue和element实现的后台分页,当 ...

  4. vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)

    文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...

  5. vue cli3.0 封装组件全局引入js文件并发布到npm

    首先用 vue create创建一个项目 当前的项目目录是这样的: 首先需要创建一个 packages 目录,用来存放组件 然后将 src 目录改为 examples 用作示例 二.修改配置 启动项目 ...

  6. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  7. 使用vue完成一个分页效果

    基于 element-ui 分页组件实现分页效果 效果如下: 使用说明: 0.首先在头部引入需要的外部文件 1.从element官方网页中复制想要的组件代码直接放入body中 2.编写逻辑代码 3.完 ...

  8. Django 分页组件替换自定义分页

    Django的分页器(paginator) 总之不太好用我们还是用自己的好一些 自定义分页器 分页实现源码 """ 自定义分页组件 """ ...

  9. drf-过滤组件|分页组件|过滤器

    目录 drf-过滤组件|分页组件|过滤器 群查接口各种筛选组件数据准备 drf过滤组件 搜索过滤组件 | SearchFilter 案例: 排序过滤组件 | OrderingFilter 案例: dr ...

随机推荐

  1. 更丰富的符号工具包 Font Awesome

    我时常想要在此类文档中通过一些图形符号来表达更丰富的含义或是对段落进行标注,例如使用 Emoji.然而 Emoji 在这方面仍然有存在一些不足,如: 颜色与文字风格不统一, 在不同系统的平台上显示不统 ...

  2. sql server 能按照自己规定的字段顺序展示

    工作中遇到,需要把sql 查询的按照指定的顺序显示 select plantname,cc_type,all_qty from VIEW_TEMP_DAY_CVT_CAP a where a.docd ...

  3. 使用for循环签到嵌套制作直角三角形

    注意代码的运行顺序: for(i = 0 ; i<9 ; i++){ for(j = 0 ; j<i-1 ; j++){ document.write("*")//** ...

  4. jmxtrans docker-compose 运行

    以下是一个简单的demo,使用jmxtrans 进行jmx 指标的处理,项目使用docker-compose 运行 同时写入数据到graphite 环境准备 docker-compose文件   ve ...

  5. SpringBoot导入Excel数据到MySQL数据库

    package com.example.example1.Controller; import com.example.example1.Entity.User; import com.example ...

  6. Balanced Ternary String(贪心+思维)

    题目链接:Balanced Ternary String 题目大意:给一个字符串,这个字符串只由0,1,2构成,然后让替换字符,使得在替换字符次数最少的前提下,使新获得的字符串中0,1,2 这三个字符 ...

  7. Programming a robot

    题目链接:Gym - 101492H 自己的纯暴力做法: /* */ # include <iostream> # include <cstdio> # include < ...

  8. 坑:jmeter部署AWS云服务器时出现连接超时Non HTTP response code: org.apache.http.conn.HttpHostConnectException

    背景: jmeter脚本部署到云服务器(AWS EC2)公网上时,启动jmeter脚本运行了5个小时才运行完毕,后面发现脚本报错timeout(如图),找了很久不知道原因,后面进入脚本发现全部在报错. ...

  9. OpenFOAM——高空腔内的湍流自然对流

    本算例来自<ANSYS Fluid Dynamics Verification Manual>中的VMFL052: Turbulent Natural Convection Inside ...

  10. (四)Cisco dhcp snooping实例2-多交换机环境(DHCP服务器和DHCP客户端位于不同VLAN)

    试验拓扑 环境:dhcp server和客户端处于不同网段的情况 dhcp server的配置 no ip routing ip dhcp pool vlan27 network 172.28.27. ...