vue中简单分页功能

***父组件如下:

orderObj:{

    status:'To be paid',

    pageNum:1,

    pageSize:8,

},

<pagination v-if="orderList.length != 0" :pagination="pagination"   @currentPageData="currentPageData"></pagination>

currentPageData(data){ // 接受分页组件发送的信息,进行列表页数据更新

    this.orderObj.pageNum = data;

    this.searchOrder(this.orderObj);// 加载数据的方法

},

 

***子组件如下:

<template>
  <div id="page-bar">
    <ul>
        <li class="pre" v-if="cur>1"><a v-on:click="cur--,pageClick()">上一页</a></li>
        <li class="pre" v-if="cur==1"><a class="banclick">上一页</a></li>
        <li v-for="index in indexs" v-bind:class="{ 'active': cur == index}" :key="index.active">
            <a v-on:click="btnClick(index)">{{ index }}</a>
        </li>
        <li class="next" v-if="cur!=all"><a v-on:click="cur++,pageClick()">下一页</a>        </li>
        <li class="next" v-if="cur == all"><a class="banclick">下一页</a></li>
        <li class="total"><a>共<i>{{all}}</i>页</a></li>
    </ul>
  </div>
</template>

子组件js如下：

<script>
export default {
    props:["pagination"],
    data() {
        return {
            all: 1, //总页数
            cur: 1 //当前页码
        }
    },
    watch: {
        cur: function(oldValue, newValue) {
            // console.log(this.pagination)
        }
    },
    methods: {
        btnClick: function(data) {
            //页码点击事件
            if (data != this.cur) {
                this.cur = data;
            }
            this.$emit('currentPageData',this.cur);// 点击把数据传给分页组件
        },
        pageClick: function() {
            this.$emit('currentPageData',this.cur);
        }
    },
    mounted () {
        this.all = Math.ceil(this.pagination.totalSize / this.pagination.pageSize);
    },
    computed: {
        indexs: function() {
            var left = 1;
            var right = this.all;
            var ar = [];
            if (this.all >= 5) {
                if (this.cur > 3 && this.cur < this.all - 2) {
                    left = this.cur - 2;
                    right = this.cur + 2;
                } else {
                    if (this.cur <= 3) {
                        left = 1;
                        right = 5;
                    } else {
                        right = this.all;
                        left = this.all - 4;
                    }
                }
            }
            while (left <= right) {
                ar.push(left);
                left++;
            }
            return ar;
        }
    }
}
</script>

子组件css如下：

<style lang="less" scoped>
#page-bar {
    width: 100%;
    height: 2rem;
    background: #fff;
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    ul {
        margin-top:0.5rem;
        display:flex;
        align-items: center;
        justify-content: center;
        li:first-child > a {
            margin-left: 0px;
        }
        a {
            border: 1px solid #ddd;
            text-decoration: none;
            position: relative;
            float: left;
            width: 1.25rem;
            padding:0.2rem 0;
            color: #337ab7;
            font-size:0.625rem;
            cursor: pointer;
        }
        li.pre a,li.next a,li.total a{
            width:auto;
            height:auto;
            padding:0.2rem 0.3rem;
        }
        a:hover {
            background-color: #eee;
        }
        li:last-child a{background: #fff;}
        a.banclick {
            cursor: not-allowed;
        }
        .active a {
            color: #fff;
            cursor: default;
            background-color: #337ab7;
            border-color: #337ab7;
        }
        i {
            font-style: normal;
            color: #d44950;
            margin: 0px 4px;
            font-size: 12px;
        }
    }
}
</style>