vue封装分页组件

介绍

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

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

效果图

演示流程:

  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"

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

Last modification:July 25th, 2019 at 02:19 pm
^_^您的每一分钱,都是对我最大的鼓励!

Leave a Comment