分頁組件

Jonathan Shieber 發布于2019-08-01 18:40 / 1230人閱讀

摘要：分頁組件通過來接受從父組件傳遞過來的值頁面中的可見頁碼，其他的以替代必須是奇數當前頁碼每頁顯示條數總記錄數父組件通過方

分頁組件

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分頁組件組件和組件通信排序組件切換組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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