Vue\u5b9e\u73b0\u4e00\u4e2a\u5206\u9875\u7ec4\u4ef6

\u5206\u9875\u662fWEB\u5f00\u53d1\u4e2d\u5f88\u5e38\u7528\u7684\u529f\u80fd\uff0c\u5c24\u5176\u662f\u5728\u5404\u79cd\u524d\u540e\u7aef\u5206\u79bb\u7684\u4eca\u5929\uff0c\u540e\u7aefAPI\u8fd4\u56de\u6570\u636e\uff0c\u524d\u7aef\u6839\u636e\u6570\u636e\u7684count<\/code>\u4ee5\u53ca\u5f53\u524d\u9875\u7801pageIndex<\/code>\u6765\u8ba1\u7b97\u5206\u9875\u9875\u7801\u5e76\u6e32\u67d3\u5230\u9875\u9762\u4e0a\u5df2\u7ecf\u662f\u4e00\u4e2a\u5f88\u666e\u901a\u5f88\u5e38\u89c1\u7684\u529f\u80fd\u4e86\u3002\u4ece\u6700\u5f00\u59cb\u7684jquery<\/code>\u65f6\u4ee3\u5230\u73b0\u5728\u7684\u5404\u79cd\u5404\u6837\u7684\u524d\u7aef\u6846\u67b6\u65f6\u4ee3\uff0c\u5206\u9875\u529f\u80fd\u90fd\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u3002
\n\u5206\u9875\u5927\u591a\u6570\uff08\u57fa\u672c\u4e0a\uff09\u60c5\u51b5\u4e0b\u90fd\u662f\u5bf9\u5f02\u6b65\u6570\u636e\u5217\u8868\u7684\u5904\u7406\uff0c\u8fd9\u91cc\u9996\u5148\u9700\u8981\u660e\u767d\u4e00\u4e0b\u5206\u9875\u7684\u6d41\u7a0b\u3002
\n\u5728\u5df2\u77e5\u6bcf\u9875\u663e\u793a\u6570\u636e\u91cfpageSize<\/code>\u4ee5\u53ca\u5f53\u524d\u9875\u7801pageIndex<\/code>\u7684\u60c5\u51b5\u4e0b\uff1a<\/p>\n\n\n

\u7531\u4e8e\u83b7\u53d6\u6570\u636e\u6761\u4ef6\u7684\u53d8\u5316\uff08\u5047\u8bbe\u662f\u4e2a\u641c\u7d22\uff0c\u5173\u952e\u8bcd\u53d8\u4e86\uff09\uff0ccount<\/code>\u662f\u4e0d\u5b9a\u7684\uff1b\u518d\u6216\u8005\uff0c\u6709\u4e2aselect<\/code>\u4e0b\u62c9\u6846\uff0c\u6765\u63a7\u5236\u6bcf\u9875\u663e\u793a\u7684\u6570\u636e\u91cfpageSize<\/code>\uff0c\u5f53\u5b83\u53d8\u5316\u7684\u65f6\u5019\uff0c\u603b\u9875\u7801\u80af\u5b9a\u4e5f\u662f\u8981\u53d8\u5316\u7684\u3002\u56e0\u6b64\u5f88\u591a\u60c5\u51b5\u4e0b\u8981\u91cd\u65b0\u8ba1\u7b97\u9875\u7801\u5e76\u6e32\u67d3\u3002<\/p>\n

\u4e86\u89e3\u4e86\u6d41\u7a0b\uff0c\u5728Vue\u4e2d\u5b9e\u73b0\u4e00\u4e2a\u5206\u9875\u7ec4\u4ef6\u4e5f\u5c31\u53d8\u5f97\u7b80\u5355\u4e86\u3002<\/p>\n

\u7b80\u5355\u5904\u7406\uff0c\u6837\u5f0f\u7c7b\u4f3c\u4e8ebootstrap<\/code>\u7684\u5206\u9875\u7ec4\u4ef6\uff0c\u5728\u7b2c\u4e00\u9875\u65f6\uff0c\u7981\u7528\u4e0a\u4e00\u9875\uff0c\u4ee5\u53ca\u9996\u9875\u6309\u94ae\uff1b\u5728\u6700\u540e\u4e00\u9875\u65f6\uff0c\u7981\u7528\u4e0b\u4e00\u9875\uff0c\u4ee5\u53ca\u5c3e\u9875\u6309\u94ae\uff1b\u8d85\u51fa\u8303\u56f4\u7684\u9875\u7801\u4ee5...<\/code>\u6765\u4ee3\u66ff\uff0c\u6548\u679c\u56fe\u5982\u4e0b\uff1a<\/p>\n

\u5206\u9875\u7ec4\u4ef6<\/h3>\n

template<\/h4>\n

<template>\n    <ul class=\"mo-paging\">\n        <!-- prev -->\n        <li\n        :class=\"['paging-item', 'paging-item--prev', {'paging-item--disabled' : index === 1}]\"\n        @click=\"prev\">prev<\/li>\n\n        <!-- first -->\n        <li\n        :class=\"['paging-item', 'paging-item--first', {'paging-item--disabled' : index === 1}]\"\n        @click=\"first\">first<\/li>\n\n        <li\n        :class=\"['paging-item', 'paging-item--more']\"\n        v-if=\"showPrevMore\">...<\/li>\n\n        <li\n        :class=\"['paging-item', {'paging-item--current' : index === pager}]\"\n        v-for=\"pager in pagers\"\n        @click=\"go(pager)\">{{ pager }}<\/li>\n\n        <li\n        :class=\"['paging-item', 'paging-item--more']\"\n        v-if=\"showNextMore\">...<\/li>\n\n        <!-- last -->\n        <li\n        :class=\"['paging-item', 'paging-item--last', {'paging-item--disabled' : index === pages}]\"\n        @click=\"last\">last<\/li>\n\n        <!-- next -->\n        <li\n        :class=\"['paging-item', 'paging-item--next', {'paging-item--disabled' : index === pages}]\"\n        @click=\"next\">next<\/li>\n    <\/ul>\n<\/template><\/code><\/pre>\n

style(scss)<\/h4>\n

.mo-paging {\n    display: inline-block;\n    padding: 0;\n    margin: 1rem 0;\n    font-size: 0;\n    list-style: none;\n    user-select: none;\n    > .paging-item {\n        display: inline;\n        font-size: 14px;\n        position: relative;\n        padding: 6px 12px;\n        line-height: 1.42857143;\n        text-decoration: none;\n        border: 1px solid #ccc;\n        background-color: #fff;\n        margin-left: -1px;\n        cursor: pointer;\n        color: #0275d8;\n        &:first-child {\n            margin-left: 0;\n        }\n        &:hover {\n            background-color: #f0f0f0;\n            color: #0275d8;\n        }\n        &.paging-item--disabled,\n        &.paging-item--more{\n            background-color: #fff;\n            color: #505050;\n        }\n        \/\/\u7981\u7528\n        &.paging-item--disabled {\n            cursor: not-allowed;\n            opacity: .75;\n        }\n        &.paging-item--more,\n        &.paging-item--current {\n            cursor: default;\n        }\n        \/\/\u9009\u4e2d\n        &.paging-item--current {\n            background-color: #0275d8;\n            color:#fff;\n            position: relative;\n            z-index: 1;\n            border-color: #0275d8;\n        }\n    }\n}<\/code><\/pre>\n

javascript<\/h4>\n

export default {\n    name : 'MoPaging',\n    \/\/\u901a\u8fc7props\u6765\u63a5\u53d7\u4ece\u7236\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u503c\n    props : {\n\n        \/\/\u9875\u9762\u4e2d\u7684\u53ef\u89c1\u9875\u7801\uff0c\u5176\u4ed6\u7684\u4ee5...\u66ff\u4ee3, \u5fc5\u987b\u662f\u5947\u6570\n        perPages : { \n            type : Number,\n            default : 5 \n        },\n\n        \/\/\u5f53\u524d\u9875\u7801\n        pageIndex : {\n            type : Number,\n            default : 1\n        },\n\n        \/\/\u6bcf\u9875\u663e\u793a\u6761\u6570\n        pageSize : {\n            type : Number,\n            default : 10\n        },\n\n        \/\/\u603b\u8bb0\u5f55\u6570\n        total : {\n            type : Number,\n            default : 1\n        },\n\n    },\n    methods : {\n        prev(){\n            if (this.index > 1) {\n                this.go(this.index - 1)\n            }\n        },\n        next(){\n            if (this.index < this.pages) {\n                this.go(this.index + 1)\n            }\n        },\n        first(){\n            if (this.index !== 1) {\n                this.go(1)\n            }\n        },\n        last(){\n            if (this.index != this.pages) {\n                this.go(this.pages)\n            }\n        },\n        go (page) {\n            if (this.index !== page) {\n                this.index = page\n                \/\/\u7236\u7ec4\u4ef6\u901a\u8fc7change\u65b9\u6cd5\u6765\u63a5\u53d7\u5f53\u524d\u7684\u9875\u7801\n                this.$emit('change', this.index)\n            }\n        }\n    },\n    computed : {\n\n        \/\/\u8ba1\u7b97\u603b\u9875\u7801\n        pages(){\n            return Math.ceil(this.size \/ this.limit)\n        },\n\n        \/\/\u8ba1\u7b97\u9875\u7801\uff0c\u5f53count\u7b49\u53d8\u5316\u65f6\u81ea\u52a8\u8ba1\u7b97\n        pagers () {\n            const array = []\n            const perPages = this.perPages\n            const pageCount = this.pages\n            let current = this.index\n            const _offset = (perPages - 1) \/ 2\n\n            const offset = {\n                start : current - _offset,\n                end   : current + _offset\n            }\n\n            \/\/-1, 3\n            if (offset.start < 1) {\n                offset.end = offset.end + (1 - offset.start)\n                offset.start = 1\n            }\n            if (offset.end > pageCount) {\n                offset.start = offset.start - (offset.end - pageCount)\n                offset.end = pageCount\n            }\n            if (offset.start < 1) offset.start = 1\n\n            this.showPrevMore = (offset.start > 1)\n            this.showNextMore = (offset.end < pageCount)\n\n            for (let i = offset.start; i <= offset.end; i++) {\n                array.push(i)\n            }\n\n            return array\n        }\n    },\n    data () {\n        return {\n            index : this.pageIndex, \/\/\u5f53\u524d\u9875\u7801\n            limit : this.pageSize, \/\/\u6bcf\u9875\u663e\u793a\u6761\u6570\n            size : this.total || 1, \/\/\u603b\u8bb0\u5f55\u6570\n            showPrevMore : false,\n            showNextMore : false\n        }\n    },\n    watch : {\n        pageIndex(val) {\n            this.index = val || 1\n        },\n        pageSize(val) {\n            this.limit = val || 10\n        },\n        total(val) {\n            this.size = val || 1\n        }\n    }\n}<\/code><\/pre>\n

\u7236\u7ec4\u4ef6\u4e2d\u4f7f\u7528<\/h3>\n

<template>\n    <div class=\"list\">\n        <template v-if=\"count\">\n            <ul>\n                <li v-for=\"item in items\">...<\/li>\n            <\/ul>\n            <mo-paging \n            :page-index=\"currentPage\" \n            :total=\"count\" \n            :page-size=\"pageSize\" \n            @change=\"pageChange\">\n            <\/mo-paging>\n        <\/template>\n    <\/div>\n<\/template>\n<script>\n    import MoPaging from '.\/paging'\n    export default {\n        \/\/\u663e\u793a\u7684\u58f0\u660e\u7ec4\u4ef6\n        components : {\n            MoPaging \n        },\n        data () {\n            return {\n                pageSize : 20 , \/\/\u6bcf\u9875\u663e\u793a20\u6761\u6570\u636e\n                currentPage : 1, \/\/\u5f53\u524d\u9875\u7801\n                count : 0, \/\/\u603b\u8bb0\u5f55\u6570\n                items : []\n            }\n        },\n        methods : {\n            \/\/\u83b7\u53d6\u6570\u636e\n            getList () {\n                \/\/\u6a21\u62df\n                let url = `\/api\/list\/?pageSize=${this.pageSize}&currentPage=${this.currentPage}`\n                this.$http.get(url)\n                .then(({body}) => {\n\n                    \/\/\u5b50\u7ec4\u4ef6\u76d1\u542c\u5230count\u53d8\u5316\u4f1a\u81ea\u52a8\u66f4\u65b0DOM\n                    this.count = body.count\n                    this.items = body.list\n                })\n            },\n\n            \/\/\u4ecepage\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u5f53\u524dpage\n            pageChange (page) {\n                this.currentPage = page\n                this.getList()\n            }\n        },\n        mounted() {\n            \/\/\u8bf7\u6c42\u7b2c\u4e00\u9875\u6570\u636e\n            this.getList()\n        } \n    }\n<\/script><\/code><\/pre>