vue封装分页组件
2019年 07月 26 日

如默

介绍

如题,一个vue项目经常要用到分页,所以封装成组件,方便复用

此组件很简单,大佬请自行忽略;网上很多都是vue + elementUI封装,也有的使用了vuex,本项目环境:nodejs版本 -6.9.0,vue版本-2.9.6

在线预览

源码:vue-pagination

效果图

演示流程:

  1. 克隆项目代码到本地
  2. 在项目目录下执行npm install
  3. 执行npm run dev
  4. 打开浏览器,输入http://localhost:8080即可预览

前几页效果

前几页

前几页

中间几页效果

中间几页

中间几页

最后几页效果

最后几页

最后几页

使用

分页组件引用只需在template和script中添加代码

template部分

在你想展示分页组件的位置添加:

<pagination :num="num" :limit="limit" @getNew="getNew"></pagination>

script部分

首先,在script中引入项目pagination.vue文件,代码:

import pagination from "./pagination.vue"

然后scriptexport default里面添加下列代码

data() {
     return {
       num: 0,
       limit: 10,
       currentList: []
       }
      },
components: {
    pagination
    },
methods: {
    getNew(value) {
        this.currentList = this.activityList.slice(value, value + this.limit);
        }
       },
mounted() {
    this.getNew(0);
       this.num = this.activityList.length;
      }

最后,请修改脚本中activityList为你自己需要分页的数组名,同时在v-for的位置修改为v-for="xxx in currentList"

至此,组件已经引用完毕,具体样式可以根据需要自行修改

vue封装分页组件

温馨提示:

本文最后更新于2019年07月26日,已超过1593天没有更新,若内容或图片失效,请留言反馈。

介绍

如题,一个vue项目经常要用到分页,所以封装成组件,方便复用

此组件很简单,大佬请自行忽略;网上很多都是vue + elementUI封装,也有的使用了vuex,本项目环境:nodejs版本 -6.9.0,vue版本-2.9.6

在线预览

源码:vue-pagination

效果图

演示流程:

  1. 克隆项目代码到本地
  2. 在项目目录下执行npm install
  3. 执行npm run dev
  4. 打开浏览器,输入http://localhost:8080即可预览

前几页效果

前几页

前几页

中间几页效果

中间几页

中间几页

最后几页效果

最后几页

最后几页

使用

分页组件引用只需在template和script中添加代码

template部分

在你想展示分页组件的位置添加:

<pagination :num="num" :limit="limit" @getNew="getNew"></pagination>

script部分

首先,在script中引入项目pagination.vue文件,代码:

import pagination from "./pagination.vue"

然后scriptexport default里面添加下列代码

data() {
     return {
       num: 0,
       limit: 10,
       currentList: []
       }
      },
components: {
    pagination
    },
methods: {
    getNew(value) {
        this.currentList = this.activityList.slice(value, value + this.limit);
        }
       },
mounted() {
    this.getNew(0);
       this.num = this.activityList.length;
      }

最后,请修改脚本中activityList为你自己需要分页的数组名,同时在v-for的位置修改为v-for="xxx in currentList"

至此,组件已经引用完毕,具体样式可以根据需要自行修改


赞 (0)

猜您想看

如何避免git pull时产生Merge branch master of等类似操作

如题,在使用 Git 的进行代码版本控制的时候,往往会发现在 log 中出现 Merge branch ‘master’ of … 这句话,本文记录如何避免

01

虚拟身份/信用卡生成

在注册有的网站的会员的时候,可能需要绑定信用卡,比如亚马逊云,使用虚拟身份绑定即可

02

太平国家森林公园——记五一自驾游

很早之前就计划五一出去玩,但是不知道去哪里。导师提到太平国家森林公园不错,遂决定前往。

03

JMeter压力测试工具初体验

Apache JMeter是Apache组织开发的基于Java的压力测试工具。

04

阿里云OSS防盗链设置

启用阿里云OSS之后遇到了一些问题,记录一下

05

Mac mini M2 16+256G入手体验

最近apple上架了新款M2的Mac mini,最低3699的价格,让人很心动,于是我花了5049购买了一台16+256的Mac,记录一下。

06

评论区(暂无评论)

这里空空如也,快来评论吧~

我要评论

Vaptcha 初始化中...