vue开发分页组件

最新推荐文章于 2025-10-16 14:30:12 发布

原创

最新推荐文章于 2025-10-16 14:30:12 发布 · 2.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #分页 #组件

本文详细介绍了一个自定义分页组件的实现方法，包括组件的代码结构、样式设置、事件监听及响应，展示了如何通过Vue.js进行分页逻辑的处理，如上一页、下一页、跳转至指定页等功能。

组件效果图

在这里插入图片描述

组件用法

<pagination
    :show-jumper="true"
    :total="100"
    :currentPage="4"
    :pagerCount="7"
    @prev-click="prevClick"
    @next-click="nextClick"
    @prev-quick-click="prevQuickClick"
    @next-quick-click="nextQuickClick"
    @page-click="pageClick"
    @current-change="currentChange"
    @jumpe="pageJumpe"
/>
<script>
	methods: {
    
    
	    prevClick(page) {
    
    
	        console.log('上一页', page);
	    },
	    nextClick(page) {
    
    
	        console.log('下一页', page);
	    },
	    pageClick(page) {
    
    
	        console.log('分页点击', page);
	    },
	    pageJumpe(page) {
    
    
	        console.log('跳转', page);
	    },
	    prevQuickClick(page) {
    
    
	        console.log('快速向前切换', page);
	    },
	    nextQuickClick(page) {
    
    
	        console.log('快速向后切换', page);
	    },
	    currentChange(page, old) {
    
    
	        console.log('分页切换', page, '切换前分页', old);
	    }
	}
</script>

组件代码

<template>
    <div class="pagination" :class="{
    
    ' pagination-vertical' : mode ==='vertical'}">
        <button type="button" :disabled="current === 1" class="btn-prev" @click="prevPage">
            <i class="iconfont icon-arrow-left"></i>
        </button>
        <ul class="pager">
            <li
                v-for="(page, index) in pageList"
                :class="{