element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求

分页组件

  1. <!--分页组件-->
  2. <template>
  3. <el-pagination
  4. @size-change="handleSizeChange"
  5. @current-change="handleCurrentChange"
  6. :current-page="currentpage"
  7. :page-sizes="[20, 50, 100]"
  8. :page-size="pagesize"
  9. :layout="layout"
  10. :total="total">
  11. </el-pagination>
  12. </template>
  13. <script>
  14. export default {
  15. name: 'Pagination',
  16. props: {
  17. pagesize: [Number, String],
  18. currentpage: [Number, String],
  19. total: [Number, String],
  20. options: [Object], // 分页发生变化赋值给options
  21. render: [Function], // 跳转触发的请求
  22. layout: {
  23. type: String,
  24. default: 'sizes, prev, pager, next'
  25. }
  26. },
  27. methods: {
  28. handleSizeChange(val) {
  29. this.options.page = 1;
  30. this.options.pageNum = val;
  31. this.render();
  32. },
  33. handleCurrentChange(val) {
  34. this.options.page = val;
  35. this.render();
  36. }
  37. }
  38. };
  39. </script>

其他页面调用

1.引入组件

<pagination
v-if="pageTotal.total>pageTotal.pageSize"
:currentpage="pageTotal.page"
:total="pageTotal.total"
:pageSize="pageTotal.pageSize"
:render="getData"
layout="prev, pager, next"
:options="pageOption">
</pagination>
  1. import Pagination from '../common/Pagination';
  2. export default {
  3. components: {
  4. 'pagination': Pagination
  5. },
  1. //分页数据
  2. pageTotal: {
  3. total: 0,
  4. pageNum: 10,
  5. page: 1
  6. },
  1. }

2,发送请求获取到后台分页信息后赋值

  1. this.pageTotal = {
  2. total: res.data.response.result.total,
  3. page: parseInt(res.data.response.result.page),
  4. pageNum: parseInt(res.data.response.result.pageNum)
  5. };

vue封装分页组件的更多相关文章

  1. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  2. vue 封装分页组件

    分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...

  3. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  4. semantic、vue 使用分页组件和日历插件

    最近正在试试semantic-ui,结合了vue,这里忍不住吐槽semantic和vue的友好度简直不忍直视,不过既然用了,这里就分享几个用到的插件了 1.分页组件(基于vue) var pageCo ...

  5. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  6. vue自定义分页组件---切图网

    vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...

  7. echars vue 封装全局组件 曲线 柱状图 同v-chars绿色系 配置样式

    Echars vue封装 ,曲线图 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

  9. Vue封装公共组件TarBar

    github:https://github.com/zwnsyw/TabBar 一.实现简单思路 1.在页面底部有一个单独的TabBar组件1.1自定义TabBar组件,在APP中使用1.2让TabB ...

随机推荐

  1. Java之九九乘法表

    public class MultiplicationTable { public static void main(String[] args) { for(int i=1;i<=9;i++) ...

  2. java基础常问面试题

    1.面向对象和面向过程的区别 面向过程 :面向过程性能比面向对象高. 因为类调用时需要实例化,开销比较大,比较消耗资源,所以当性能是最重要的考量因素的时候,比如单片机.嵌入式开发.Linux/Unix ...

  3. 使用内核LED框架搭建驱动 ——led_classdev_register

    #include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...

  4. Lpl and Energy-saving Lamps

    During tea-drinking, princess, amongst other things, asked why has such a good-natured and cute Drag ...

  5. P5444 [APIO2019]奇怪装置

    传送门 考虑求出最小的循环节 $G$ 使得 $t,t+G$ 得到的数对是一样的 由 $y \equiv t \mod B$ ,得到 $G$ 一定是 $B$ 的倍数,设 $zB=G$,则 $t,t+zB ...

  6. echarts柱状图个数多,横坐标名称过长显示不全解决方法

    当echarts柱状图个数多,横坐标名称过长时横坐标名称显示不全,网上并没有搜到太好的方法,于是自己加工了下,将横坐标名称显示前六位,当鼠标放到上面的时候显示全名,下面是示例代码,可以直接拷贝测试 代 ...

  7. JS同步执行代码

    new Promise(function(){initAppToken()}).then(()=>                     getApps(this.pageInfo).then ...

  8. web前端工程化

    目标 1.能够了解模块化的相关规范 2.了解webpack 3.了解使用Vue单文件组件 4.能够搭建Vue脚手架 5.掌握Element-UI的使用 1.模块化的分类 A.浏览器端的模块化 1).A ...

  9. 行人重识别(ReID) ——技术实现及应用场景

    导读 跨镜追踪(Person Re-Identification,简称 ReID)技术是现在计算机视觉研究的热门方向,主要解决跨摄像头跨场景下行人的识别与检索.该技术能够根据行人的穿着.体态.发型等信 ...

  10. LightOJ 1289 LCM from 1 to n(位图标记+素数筛

    https://vjudge.net/contest/324284#problem/B 数学水题,其实就是想写下位图..和状压很像 题意:给n让求lcm(1,2,3,...,n),n<=1e8 ...