vue封装分页组件

vue封装分页组件

来不及午觉
2019-07-21 / 1 评论 / 2,554 阅读 / 正在检测是否收录...

介绍

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

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

在线预览

[github author="rumosky" project="vue-pagination"][/github]

效果图

演示流程:

  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

评论 (1)

取消
  1. 头像
    123
    Windows 10 · Google Chrome

    123

    回复