VUE实现一个分页组件

分页是WEB开发中很常用的功能，尤其是在各种前后端分离的今天，后端API返回数据，前端根据数据的count以及当前页码pageIndex来计算分页页码并渲染到页面上已经是一个很普通很常见的功能了。从最开始的jquery时代到现在的各种各样的前端框架时代，分页功能都是必不可少的。
分页大多数（基本上）情况下都是对异步数据列表的处理，这里首先需要明白一下分页的流程。
在已知每页显示数据量pageSize以及当前页码pageIndex的情况下：

• 请求API，返回第一屏数据（pageSize内）以及所有相关条件的数据总量count
• 将数据总量传递给page组件，来计算页码并渲染到页面上
• 点击页码，发送请求获取该页码的数据，返回数据总量count以及该页码下的数据条目。

由于获取数据条件的变化（假设是个搜索，关键词变了），count是不定的；再或者，有个select下拉框，来控制每页显示的数据量pageSize，当它变化的时候，总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。

了解了流程，在Vue中实现一个分页组件也就变得简单了。

简单处理，样式类似于bootstrap的分页组件，在第一页时，禁用上一页，以及首页按钮；在最后一页时，禁用下一页，以及尾页按钮；超出范围的页码以…来代替，效果图如下：

由于获取数据条件的变化（假设是个搜索，关键词变了），count是不定的；再或者，有个select下拉框，来控制每页显示的数据量pageSize，当它变化的时候，总页码肯定也是要变化的。因此很多情况下要重新计算页码并渲染。

了解了流程，在Vue中实现一个分页组件也就变得简单了。

简单处理，样式类似于bootstrap的分页组件，在第一页时，禁用上一页，以及首页按钮；在最后一页时，禁用下一页，以及尾页按钮；超出范围的页码以…来代替，效果图如下：

分页组件

template

<template>

    <ulclass="mo-paging">

        <!-- prev -->

        <li:class="['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]" @click="prev">prev</li>

 

        <!-- first -->

        <li:class="['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]" @click="first">first</li>

 

        <li:class="['paging-item', 'paging-item--more']" v-if="showPrevMore">...</li>

 

        <li:class="['paging-item', {'paging-item--current' : index === pager}]" v-for="pager in pagers" @click="go(pager)">{{ pager }}</li>

 

        <li:class="['paging-item', 'paging-item--more']" v-if="showNextMore">...</li>

 

        <!-- last -->

        <li:class="['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]" @click="last">last</li>

 

        <!-- next -->

        <li:class="['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]" @click="next">next</li>

    </ul>

</template>

style(scss)

.mo-paging {

    display: inline-block;

    padding:0;

    margin:1rem0;

    font-size:0;

    list-style:none;

    user-select:none;

    > .paging-item {

        display:inline;

        font-size:14px;

        position:relative;

        padding:6px12px;

        line-height:1.42857143;

        text-decoration:none;

        border:1pxsolid #ccc;

        background-color:#fff;

        margin-left:-1px;

        cursor:pointer;

        color:#0275d8;

        &:first-child {

            margin-left:0;

        }

        &:hover {

            background-color:#f0f0f0;

            color:#0275d8;

        }

        &.paging-item--disabled,

        &.paging-item--more{

            background-color:#fff;

            color:#505050;

        }

        //禁用

        &.paging-item--disabled {

            cursor: not-allowed;

            opacity: .75;

        }

        &.paging-item--more,

        &.paging-item--current {

            cursor:default;

        }

        //选中

        &.paging-item--current {

            background-color:#0275d8;

            color:#fff;

            position:relative;

            z-index:1;

            border-color:#0275d8;

        }

    }

}

javascript

exportdefault{

    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(){

            returnMath.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)

            }

 

            returnarray

        }

    },

    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

        }

    }

}

父组件中使用

<template>

    <divclass="list">

        <templatev-if="count">

            <ul>

                <liv-for="item in items">...</li>

            </ul>

            <mo-paging:page-index="currentPage":totla="count":page-size="pageSize"@change="pageChange">

            </mo-paging>

        </template>

    </div>

</template>

<script>

    import MoPaging from './paging'

    export default {

        //显示的声明组件

        components : {

            MoPaging

        },

        data () {

            return {

                pageSize : 20 , //每页显示20条数据

                currentPage : 1, //当前页码

                count : 0, //总记录数

                items : []

            }

        },

        methods : {

            //获取数据

            getList () {

                //模拟

                let url = `/api/list/?pageSize=${this.pageSize}¤tPage=${this.currentPage}`

                this.$http.get(url)

                .then(({body}) => {

 

                    //子组件监听到count变化会自动更新DOM

                    this.count = body.count

                    this.items = body.list

                })

            },

 

            //从page组件传递过来的当前page

            pageChange (page) {

                this.currentPage = page

                this.getList()

            }

        },

        mounted() {

            //请求第一页数据

            this.getList()

        }

    }

</script>

本文标题：Vue实现一个分页组件
本文链接：https://smohan.net/blog/pgk1qr
本站使用「 署名 4.0 国际」创作共享协议，转载或使用请署名并注明出处。 相关说明 »