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"

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

版权声明:本站未注明转载的文章均为原创,版权归 rumosky 所有,且采用 CC-BY-NC-SA 4.0 知识共享协议授权
本文链接:https://rumosky.com/archives/158
所有转载文章须注明出处,保留原作者链接,并说明文章非原创,且不可用于商业目的
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇