Vue —— 分页器

最新推荐文章于 2025-05-21 17:44:25 发布

原创

最新推荐文章于 2025-05-21 17:44:25 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

这篇博客介绍了如何在 Vue.js 应用中创建和使用全局组件分页器 Pagination。主要内容包括在 main.js 中引入并注册组件，以及在父组件 Search 中如何向子组件 Pagination 传递分页数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局组件：分页器 Pagination

<template>
    <div class="pagination">
        <button :disabled="pageNo==1" @click="$emit('getPageNo',pageNo-1)">上一页</button>
        <button v-if="startNumAndEndNum.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</button>
        <button v-if="startNumAndEndNum.start > 2">···</button> 

        <!-- 中间部分 -->
        <button v-for="(page,index) in startNumAndEndNum.end" :key="index" v-if="page >= startNumAndEndNum.start"  @click="$emit('getPageNo',page)" :class="{active:pageNo==page}">{
   
   {
   
   page}}</button>


        <button v-if="startNumAndEndNum.end  < totalPage -1">···</button>
        <button v-if="startNumAndEndNum.end < totalPage" @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==total}">{
   
   {
   
   totalPage}}</button>
        <button :disabled="pageNo==totalPage" @click=