基于bootstrap的分页器，Vue组件

今天药忘吃喽~ 2022-01-14 08:09 250阅读 0赞

基于bootstrap的分页器，需要引入bootstrap的相关依赖，点击页码数字可以进行相应的响应（换页/加载数据）

![20190615152126758.png][]

![20190615152151588.png][]

### **Pagenation.vue** ###

<template>
        <div id="pagenation" class="row justify-content-center">
            <div class="col-auto">
                <ul v-if="pagenation.total>pagenation.pageSize" class="pagination ">
                    <li class="page-item">
                        <a href="javascript:void(0);" @click="startPage" class="page-link">首页</a>
                    </li>
                    <li v-for="i in displayPage"
                        :key="'pagenation_'+i" :class="pagenationItemActive(i)">
                        <a href="#" @click="selectPage(i)" class="page-link">{
       {i}}</a>
                    </li>
                    <li class="page-item ">
                        <a href="javascript:void(0);" @click="endPage" class="page-link">尾页</a>
                    </li>
                </ul>
            </div>
            <div class="col-auto  mb-3">
                <div class="input-group" style="width: 150px">
                    <input type="text" class="form-control" :placeholder="jumpPageNumPlaceholder" v-model.number="jumpPageNum">
                    <div class="input-group-append">
                        <button @click="jumpPageClick" @blur="jumpPageBlur" class="input-group-text">跳转</button>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
        export default {
            name: "Pagenation",
            data() {
                return {
                    jumpPageNum: '',
                    jumpPageNumPlaceholder: '跳转到...'
                }
            },
            props: {
                pagenation: Object,
                // pagenation: {
                //     total: 22,
                //     pageSize: 10,
                //     pageNum: 1,
                // },
    
                pageNumChange: Function,
            },
            computed: {
                displayPage() {
                    let totalPage = this.pagenation.total % this.pagenation.pageSize === 0 ? (parseInt(this.pagenation.total / this.pagenation.pageSize)) : (parseInt(this.pagenation.total / this.pagenation.pageSize) + 1)
                    let pageNum = this.pagenation.pageNum;
                    if (totalPage < 10) {
                        return totalPage;
                    } else {
                        let arr = []
                        if (pageNum < 5) {
                            for (let i = 1; i <= 10; i++) {
                                arr.push(i)
                            }
                        } else if (pageNum >= totalPage - 5) {
                            for (let i = totalPage - 9; i <= totalPage; i++) {
                                arr.push(i)
                            }
                        } else {
                            for (let i = pageNum - 4; i <= pageNum + 5 && i < totalPage; i++) {
                                arr.push(i)
                            }
                        }
                        return arr
                    }
                }
            },
            watch: {
                'pagenation.pageNum'(newValue, oldValue) {
                    console.log(newValue, oldValue)
                    this.pageNumChange(newValue, oldValue)
                },
            },
            methods: {
                pagenationItemActive(i) {
                    if (i == this.pagenation.pageNum) {
                        return 'page-item active'
                    } else {
                        return 'page-item'
                    }
                },
                selectPage(pageNum) {
                    this.pagenation.pageNum = pageNum
                },
                startPage() {
                    if (this.pagenation.pageNum !== 1) {
                        this.pagenation.pageNum = 1
                    }
                },
                endPage() {
                    let totalPage = this.pagenation.total % this.pagenation.pageSize === 0 ? (parseInt(this.pagenation.total / this.pagenation.pageSize)) : (parseInt(this.pagenation.total / this.pagenation.pageSize) + 1)
                    if (this.pagenation.pageNum !== totalPage) {
                        this.pagenation.pageNum = totalPage
                    }
                },
                jumpPageBlur() {
                    this.jumpPageNumPlaceholder = '跳转到...'
                },
                jumpPageClick() {
                    let regex = /^[0-9]+$/;
                    if (regex.test(this.jumpPageNum)) {
                        let jumpPageNum = parseInt(this.jumpPageNum)
                        if (jumpPageNum > 0 && jumpPageNum <= (this.pagenation.total % this.pagenation.pageSize === 0 ? (parseInt(this.pagenation.total / this.pagenation.pageSize)) : (parseInt(this.pagenation.total / this.pagenation.pageSize) + 1))) {
                            this.pagenation.pageNum = jumpPageNum
                        } else {
                            this.jumpPageNumPlaceholder = '超出范围'
                        }
                    } else {
                        this.jumpPageNumPlaceholder = '输入错误'
                    }
                    this.jumpPageNum = '';
                }
            }
        }
    </script>
    
    <style scoped>
    
    </style>

应用：

引入组件**Pagenation.vue**

<Pagenation :pagenation="pagenation" :page-num-change="pageNumChange"></Pagenation>

data提供的数据
    pagenation: {
        total: 22,//总数据量
        pageSize: 10,//每页显示数据量
        pageNum: 1,//当前页码
    },

methods定义的方法pageNumChange：当当前页码改变时触发，用于加载数据

pageNumChange(newPageNum, oldPageNum){
    //可以传入两个参数，newPageNum：新的页码，oldPageNum：之前的页码
      console.log("pageNumChange",newPageNum, oldPageNum)
    },

[20190615152126758.png]: /images/20220114/3a08892e3b5f45e2b68ff35cb6fbf3ba.png
[20190615152151588.png]: /images/20220114/0a1afacc6a4848b393aaa65805f5fc39.png