前端分页

html

<div class="container">
    <ul class="pagination">
        <li class="prev fleft" @click="prevPage()">上一页</li>

        <li :class="{'active':currentPage==item.val}" v-for="item in pagelist" v-text="item.text"
            @click="changePage(item.val)">1
        </li>

        <li @click="nextPage()">下一页</li>
    </ul>

</div>

computed: {
    totalPage: function () {
        return Math.ceil(this.total / this.limit)
    },
    pagelist: function () {
        var list = [];
        var count = Math.floor(this.pageSize / 2), center = this.currentPage;
        var left = 1, right = this.totalPage;

        if (this.totalPage > this.pageSize) {
            if (this.currentPage > count + 1) {
                if (this.currentPage < this.totalPage - count) {
                    left = this.currentPage - count;
                    right = this.currentPage + count - 1;
                } else {
                    left = this.totalPage - this.pageSize + 1;
                }
            } else {
                right = this.pageSize;
            }
        }

        // 遍历添加到数组里
        while (left <= right) {
            list.push({
                text: left,
                val: left
            });
            left++;
        }
        return list;
    },

},
created() {
    // 计算一共有几页
    this.totalPage = Math.ceil(this.tableData.length / this.pageSize);
    this.getCurrentPageData();
},

methods

// 当currentPage为1时，我们显示(0*pageSize+1)-1*pageSize，当currentPage为2时，我们显示(1*pageSize+1)-2*pageSize...
getCurrentPageData() {
    let begin = (this.currentPage - 1) * this.pageSize;
    let end = this.currentPage * this.pageSize;
    this.currentPageData = this.tableData.slice(
        begin,
        end
    );
},
prevPage() {
    if (this.currentPage == 1) {
        return
    } else {
        this.currentPage--;
        this.getCurrentPageData();
    }
    ;

},
nextPage() {
    if (this.currentPage == this.totalPage) {
        return
    } else {
        this.currentPage++;
        this.getCurrentPageData();
    }
    ;

},
changePage: function (idx) {
    if (idx != this.currentPage && idx > 0 && idx <= this.totalPage) {
        this.currentPage = idx;
        this.getCurrentPageData();
    }
},