分页组件

Jonathan Shieber 发布于2019-08-01 18:40 / 1123人阅读

摘要：分页组件通过来接受从父组件传递过来的值页面中的可见页码，其他的以替代必须是奇数当前页码每页显示条数总记录数父组件通过方

分页组件

export default {
    name : "MoPaging",
    //通过props来接受从父组件传递过来的值
    props : {

        //页面中的可见页码，其他的以...替代, 必须是奇数
        perPages : { 
            type : Number,
            default : 5 
        },

        //当前页码
        pageIndex : {
            type : Number,
            default : 1
        },

        //每页显示条数
        pageSize : {
            type : Number,
            default : 10
        },

        //总记录数
        total : {
            type : Number,
            default : 1
        },

    },
    methods : {
        prev(){
            if (this.index > 1) {
                this.go(this.index - 1)
            }
        },
        next(){
            if (this.index < this.pages) {
                this.go(this.index + 1)
            }
        },
        first(){
            if (this.index !== 1) {
                this.go(1)
            }
        },
        last(){
            if (this.index != this.pages) {
                this.go(this.pages)
            }
        },
        go (page) {
            if (this.index !== page) {
                this.index = page
                //父组件通过change方法来接受当前的页码
                this.$emit("change", this.index)
            }
        }
    },
    computed : {

        //计算总页码
        pages(){
            return Math.ceil(this.size / this.limit)
        },

        //计算页码，当count等变化时自动计算
        pagers () {
            const array = []
            const perPages = this.perPages
            const pageCount = this.pages
            let current = this.index
            const _offset = (perPages - 1) / 2

            
            const offset = {
                start : current - _offset,
                end   : current + _offset
            }

            //-1, 3
            if (offset.start < 1) {
                offset.end = offset.end + (1 - offset.start)
                offset.start = 1
            }
            if (offset.end > pageCount) {
                offset.start = offset.start - (offset.end - pageCount)
                offset.end = pageCount
            }
            if (offset.start < 1) offset.start = 1

            this.showPrevMore = (offset.start > 1)
            this.showNextMore = (offset.end < pageCount)

            for (let i = offset.start; i <= offset.end; i++) {
                array.push(i)
            }

            return array
        }
    },
    data () {
        return {
            index : this.pageIndex, //当前页码
            limit : this.pageSize, //每页显示条数
            size : this.total || 1, //总记录数
            showPrevMore : false,
            showNextMore : false
        }
    },
    watch : {
        pageIndex(val) {
            this.index = val || 1
        },
        pageSize(val) {
            this.limit = val || 10
        },
        total(val) {
            this.size = val || 1
        }
    }
}

父组件使用

GPU云服务器云服务器 Bootstrap分页组件组件和组件通信排序组件切换组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51948.html

小程序分页实践：编写可复用分页组件

摘要：项目中遇到切换列表，每个都需要分页的需求，分页流程具有相似性，于是想将分页封装为组件，方便应用。组件的复用完成了以上组件，在对其他分页的页面，可以直接复用。项目中遇到 tab切换列表，每个tab都需要分页的需求，分页流程具有相似性，于是想将分页封装为组件，方便应用。组件的应用已写成一个小demo，效果如下图所示（数据用mock模拟）： showImg(https://segment...

crelaber 2019-08-26 10:11 评论0 收藏0
关于vue+element-ui项目的分页，返回默认显示第一页的问题解决

摘要：所以这就导致，页面内容正确，但是页码高亮依旧是第一页解决办法我们需要在之后刷新这个分页组件或者让分页组件的后于之后加载到页面。然后再次测试，发现完美解决问题。问题描述当前页面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后点击页码跳到第3页，然后在第三页点击页面链接跳转到新的页面showImg(https://segmentfa...

YFan 2019-08-26 13:22 评论0 收藏0
Laravel自定义分页样式

摘要：的分页组件默认为的分页样式，但如果我们用的并不是或者说分页的结构不一样，这时我们需要自定义分页。进一步，可以看到通过继承并对方法进行重写，由此可见，我们可以通过继承类并对方法进行重写，就可以自定义分页的样式了。 Laravel 的分页组件默认为 Bootstrap 的分页样式，但如果我们用的并不是 Bootstrap 或者说分页的 HTML结构不一样，这时我们需要自定义...

Lionad-Morotar 2019-06-27 13:58 评论0 收藏0
vue分页组件

摘要：最近在做系统管理后台的需求，用了，体验还是挺好的，但是一直找不到一个比较好的分页组件，就自己整了一个。移动端可能不适合使用这个组件默认每个分页会带上类名，点击态会带上的类名，需要修改可以去改动的设置项目地址分页组件欢迎大家使用交流最近在做系统管理后台的需求，用了vue，体验还是挺好的，但是一直找不到一个比较好的分页组件，就自己整了一个。使用的方法如下，只要传递一个total总页数，...

meislzhua 2019-08-21 11:22 评论0 收藏0
第九集: 从零开始实现一套pc端vue的ui组件库( 分页器组件 )

摘要：第九集从零开始实现分页器组件本集定位分页器这个组件也算是个老朋友了还记得刚学的时候写个分页器要行代码要是能穿越回去我得好好教教我自己设计模式第九集: 从零开始实现( 分页器组件 ) 本集定位: 分页器这个组件也算是个老朋友了, 还记得刚学js的时候, 写个分页器要300行代码,要是能穿越回去, 我得好好教教我自己设计模式

levy9527 2019-08-30 15:44 评论0 收藏0
第九集: 从零开始实现一套pc端vue的ui组件库( 分页器组件 )

摘要：第九集从零开始实现分页器组件本集定位分页器这个组件也算是个老朋友了还记得刚学的时候写个分页器要行代码要是能穿越回去我得好好教教我自己设计模式第九集: 从零开始实现( 分页器组件 ) 本集定位: 分页器这个组件也算是个老朋友了, 还记得刚学js的时候, 写个分页器要300行代码,要是能穿越回去, 我得好好教教我自己设计模式

leoperfect 2019-08-26 10:35 评论0 收藏0