vue 分页自定义封装

封装 js
// 分页封装
(function () {

Vue.component('pagination', {
    template: `
         <div class="pagination" style=" display: flex;justify-content: end;align-items: center;">
           <div style="font-size: 14px;margin-right:10px"">共<span style="margin:0 5px">{{total}}</span>条</div>
           <div >
           <el-select v-model="pageSize" placeholder="请选择" class="pageSizes" @change="selectChange" >
           <el-option
             class="fpage"
             v-for="item in pageSizes"
             :key="item.value"
             :label="item.label"
             :value="item.value">
            </el-option>
            </el-select>
           </div>
           <div style="display: flex;align-items: center;margin:0 10px"">
           <i class="el-icon-arrow-left currentPage" :class="{button:currentPage==1}" @click="leftClick"></i>
           <ul style="margin:0 10px;display: flex;" >
           <template v-for="(item,index) in countListdate ">
           <li :class="{current:item==currentPage,button:count==1}"  kye="index" style="margin:0 10px" class='currentPage' @click="currentPageClick(item)">{{item}}<li>
           </template>
           </ul>
           <i class="el-icon-arrow-right currentPage" :class="{button:currentPage==countList.length}"  @click="rightClick" ></i>
           </div>
           <div>
           </div>
           <div  style="display: flex;align-items: center;" class="right">
           <div style="font-size: 14px;">前往</div>
           <div style="margin:0 10px">
           <el-input v-model="herfPage"  @blur="herfPageBlur" >
           </el-input>
           </div> 
           <div style="font-size:14px;">页</div>
           </div>
         </div>
        `,
    //  <div v-if="count>5">...</div>
    data() {
        return {
            total: 21, //总条数
            count: 1, //总页数 
            countList: ["1"], // 初始总页数 
            countListdate: ['1'], //页面展示总页数
            pageSize: 10, // 容量
            currentPageSon: 1,
            currentPage: 1, //当前页数
            pageSizes: [], //分页选择
            herfPage: '1',
        }
    },
    props: ['total', 'currentPage', 'pageSize', 'pageSizes'],
    mounted() {

    },
    destroyed() {

    },
    watch: {
        total(val) {
            this.count = Math.ceil(this.total / this.pageSize)
            if (this.count == 0) {
                this.countList = ["1"]
                this.countListdate = ['1']
            } else {
                this.countList = []
                for (let index = 0; index < this.count; index++) {
                    this.countList.push(`${index+1}`)
                }
                console.log("this.countList", this.countList);
                if (this.countList.length > 8) {
                    this.pagesDate(1)
                } else {
                    this.countListdate = this.countList
                }


            }

        },
        currentPage(val) {
            this.pagesDate(val)

        },
        pageSize(val) {
            this.pageSize = val
            this.herfPage = '1'
            if (val == '全部') {
                this.count = 1
                this.countList = ["1"]
                this.countListdate = ['1']
            } else {
                this.count = Math.ceil(this.total / this.pageSize)
                if (this.count == 0) {
                    this.countList = ["1"]
                    this.countListdate = ['1']
                } else {
                    this.countList = []
                    for (let index = 0; index < this.count; index++) {
                        this.countList.push(`${index+1}`)
                    }
                    if (this.countList.length > 8) {
                        this.pagesDate(1)
                    } else {
                        this.countListdate = this.countList
                        setTimeout(() => {
                            this.currentPage = 1
                        }, 500)
                    }


                }
            }
        }
    },

    methods: {
        leftClick() {
            if (this.currentPage > 1) {
                let num = this.currentPage--
                this.pagesDate(num)
                this.$emit('current-change', this.currentPage)
                // this.herfPage = num - 1
            }

        },
        rightClick() {
            if (Number(this.currentPage) < Number(this.countList.length)) {
                let num = this.currentPage++
                this.pagesDate(num)
                this.$emit('current-change', this.currentPage)
                // this.herfPage = num + 1
            }

        },

        // 初始化
        init() {
            this.count = this.total % this.pageSize
        },
        // 当前页
        currentPageClick(val) {
            this.herfPage = val
            if (this.count == 1) {
                return
            } else {
                this.$emit('current-change', val)
            }

        },
        // 页数数组
        pagesDate(val, type) {
            if (val == "全部") {
                this.countList = ["1"]
                this.countListdate = ['1']
                return
            }
            if (this.countList.length > 6) {
                if ((Number(this.countList.length) - Number(val)) == 0 || (Number(this.countList.length) - Number(val)) == 1 || (Number(this.countList.length) - Number(val)) == 2 || (Number(this.countList.length) - Number(val)) == 3) {
                    this.countListdate = this.countList.slice(Number(this.countList.length) - 7, this.countList.length)
                }
                if (val == 1 || val == 2 || val == 3) {
                    this.countListdate = this.countList.slice(0, 7)
                    if (type == 'ry') {
                        setTimeout(() => {
                            this.currentPage = 1
                        }, 500)
                    }
                }
                if (val > 3 && (Number(this.countList.length) - Number(val)) > 3) {
                    this.countListdate = []
                    this.countListdate.push(`${val}`)
                    this.countListdate.unshift(`${Number(val)-1}`)
                    this.countListdate.unshift(`${Number(val)-2}`)
                    this.countListdate.unshift(`${Number(val)-3}`)
                    this.countListdate.push(`${Number(val) + 1}`)
                    this.countListdate.push(`${Number(val) + 2}`)
                    this.countListdate.push(`${Number(val) + 3}`)
                }


            } else {
                this.countListdate = this.countList
            }
        },
        // 触发容量
        selectChange(val) {

            if (val == '全部' || val == "") {
                this.pageSize = '1'
                this.currentPage = 1
                this.herfPage = '1'
                this.pagesDate(val)
            }
            this.$emit('size-change', val, '1')



        },
        // 页面跳转 
        herfPageBlur() {
            if (parseInt(this.count) >= parseInt(this.herfPage)) {
                this.currentPage = this.herfPage
                this.pagesDate(this.currentPage)
                this.$emit('current-change', this.herfPage)
            } else {
                this.herfPage = this.currentPage
                this.$emit('current-change', this.herfPage)
            }
        }
    },
})

})();

        <div class="block" style="display: flex;justify-content: flex-end;  margin: 5px 0;">
            <pagination :current-page="formInline.pageNum" :total="formInline.total" :page-sizes="pageSizeList"
                @size-change="handleSizeChange" :page-size="formInline.pageSize"
                @current-change="handleCurrentChange">
            </pagination>
        </div>

current-page // 当前 页数
page-size // 当前 容量
total
size-change //分页 页数

current-change//分页 容量

page-sizes// 分页参数

     pageSizeList: [{
            value: '500',
            label: '500/页'
        }, {
            value: '1000',
            label: '1000/页'
        }, {
            value: '5000',
            label: '5000/页'
        }, {
            value: '10000',
            label: '10000/页'
        }, {
            value: '全部',
            label: '全部'
        }],