分頁組件

Jonathan Shieber 發(fā)布于2019-08-01 18:40 / 1243人閱讀

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

分頁組件

export default {
    name : "MoPaging",
    //通過props來接受從父組件傳遞過來的值
    props : {

        //頁面中的可見頁碼，其他的以...替代, 必須是奇數(shù)
        perPages : { 
            type : Number,
            default : 5 
        },

        //當(dāng)前頁碼
        pageIndex : {
            type : Number,
            default : 1
        },

        //每頁顯示條數(shù)
        pageSize : {
            type : Number,
            default : 10
        },

        //總記錄數(shù)
        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方法來接受當(dāng)前的頁碼
                this.$emit("change", this.index)
            }
        }
    },
    computed : {

        //計算總頁碼
        pages(){
            return Math.ceil(this.size / this.limit)
        },

        //計算頁碼，當(dāng)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, //當(dāng)前頁碼
            limit : this.pageSize, //每頁顯示條數(shù)
            size : this.total || 1, //總記錄數(shù)
            showPrevMore : false,
            showNextMore : false
        }
    },
    watch : {
        pageIndex(val) {
            this.index = val || 1
        },
        pageSize(val) {
            this.limit = val || 10
        },
        total(val) {
            this.size = val || 1
        }
    }
}

父組件使用