Vue分页组件实现过程详解

目录
  • 组件的一些规定和条件
  • 创建分页数组
  • 切换页码
  • CSS

HTML代码

<template>
      <div class="paging" v-if="count">
        <ul>
            <li class="pre" v-show="page > 1" @click="jian()">
                <span>上一页</span>
            </li>
            <li v-for="(item,index) in pageall" :key="index"
            :class="{'active': page === item, 'ellipsis': item === '...'}"
            @click="res_page(item)">
            {{item}}</li>
            <li class="next" v-show="page < totalPages" @click="jia()">
                <span>下一页</span>
            </li>
        </ul>
        <span class="sum">共 {{totalPages}} 页, 跳至</span>
        <input type="text" @keyup.enter="activePage($event)">
        <span>页</span>
    </div>
</template>

组件的一些规定和条件

我们可以把这个分页组件分为三种形态

第一种 总页数 <=5 的

我们规定当总页数小于5时, 展示出所有的页码

第二种 当前页为第一页或最后一页的

当页码为第一页或者最后一页时, 选择性的消失 上一页 或 下一页 按钮

第三种 以上两种都不是的

首先这个分页组件需要得知三个条件

count(数据总数), page(当前页数), page_size(每页展示的数量)

prop:['count','page','page_size']

注意: 由于子组件不能直接改变父组件的值, 所以在引用该分页组件的父组件中,

可以写入 :changePage.sync=“page”,

每当page改变时 采用this.$emit(“changePage”, value) 传入value来改变page

创建分页数组

在Vue计算属性中得出总页数 totalPages

totalPages(){
	return Math.ceil(this.count / this.paeg_size)
}

在Vue计算属性中得出两个值, beforePages afterPages 代表最小值与最大值(第一页与最后一页除外)

beforePages(){
	return this.page -2
}
afterPages(){
    return this.page + 2
},

我们规定总是显示当前页的前两页和后两页.

重点来了, 在Vue属性中创建分页数组

添加第一页和最后一页

首先我们规定的beforePage=page-2, 当beforepage > 1 时, 即page > (1+2) , 这个时候就需要添加第一页 .

最后一页同理

什么时候添加省略呢?

我们还规定当totalPage总页数小于等于5页时,展示所有页码 ,

当totalPage > 5,并且beforePage=page-2>=3或者afterPage=page+2<=totalPage-2时添加省略.

当totalPage < 5,如图所示:

我们需要把前省略替换成2 后省略替换成4

pageall(){
    let arr=[]
    for(let everyPages = this.beforePages; everyPages <= this.afterPages; everyPages++) {
        if(everyPages > this.totalPages) {
            continue;
        }
        if(everyPages <= 0){
            continue;
        }
       arr.push(everyPages)
    }
    // 添加第一页
    if(this.page > 3 {
        arr.unshift(1)
    }
    // 添加最后一页
    if(this.page < this.totalPages-2) {
        arr.push(this.totalPages)
    }
    //添加前省略
    if(this.page >= 5) {
    	if(this.totalPages > 5) {
    		arr.splice(1,0,'...')
    	}else{
    		arr.splice(1,0,2)
    	}
    }
    //添加后省略
    if(this.page <= this.totalPages-4) {
    	if(this.totalPages > 5) {
    		arr.splice(arr.length-1,0,"...")
    	}else{
    		arr.splice(arr.length-1,0,4)
    	}
   }
    return arr
}

切换页码

现在数组已经完成, 还需要添加上点击切换页码的方法.

点击下一页

(0)

相关推荐

  • Vue分页组件的封装方法

    前言 这个是基于vue2的分页封装,仿照elementUI而写的组件. 效果如图 话不多说,直接上代码 <template>   <div class="pagination">     <!-- 总页数 -->     <div class="total">共{{ total }}条</div>     <!-- 选择每页的条数 -->     <select name="&q

  • Vue开发之封装分页组件与使用示例

    本文实例讲述了Vue开发之封装分页组件与使用.分享给大家供大家参考,具体如下: 使用elementui中的el-pagination来封装分页组件 pagination.vue: <template> <div class="pagination"> <el-pagination small class="text-center" @size-change="handleSizeChange" @current-ch

  • 基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

  • vue 基于element-ui 分页组件封装的实例代码

    具体代码如下所示: <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, j

  • vue3封装自己的分页组件

    本文实例为大家分享了vue3封装自己分页组件的具体代码,供大家参考,具体内容如下 背景 在浏览列表类型的数据的时候,如果数据比较多一次性全部请求会出现性能损耗以及加载延迟等问题,那么此时分页组件就起到了关键作用,它可以只请求一部分数据,也不会占用太多的页面空间,想看别的数据可以通过页码的改变来发起请求,刷新页面数据 现在我们自己来封装分页组件 组件所需参数 total 属性 :用来传递数据总条数 pagesize 属性 :每页展示几条数据 currentPage 属性 :当前默认页码 chang

  • vue3.0手动封装分页组件的方法

    本文实例为大家分享了vue3.0手动封装分页组件的具体代码,供大家参考,具体内容如下 1.父组件引入 src/views/goods/components/goods-comment.vue <!-- page表示初始化分页时,默认显示第几页 --> <XtxPagination @change-page='changePage' :pagesize='reqParams.pageSize' :total='total' :page='1' /> //调接口 import {fin

  • vue+iview分页组件的封装

    vue+iview的分页组件封装 1.在components中创建pagination文件夹,接着创建src,index.js,index.less文件 2.index.less文件 //需要修改的样式 .ivu-page-options { margin-left: 10px; .ivu-page-options-sizer { margin-right: 0; } } 3.index.js文件 import "./index.less"; import component from

  • Vue分页组件实现过程详解

    目录 组件的一些规定和条件 创建分页数组 切换页码 CSS HTML代码 <template> <div class="paging" v-if="count"> <ul> <li class="pre" v-show="page > 1" @click="jian()"> <span>上一页</span> </li>

  • vue 注册组件的使用详解

    一.介绍 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢? 组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素. 二.如何注册组件 Vue.js的组件的使用有3个步骤:创建组件构造器.注册组件和使用组件. 下面用代码演示这三步 <!DOCTYPE html> <html> <body> <div id=&q

  • Vue分页器组件使用方法详解

    本文实例为大家分享了Vue分页器组件的使用,供大家参考,具体内容如下 效果图如下: 鼠标悬浮时切换为箭头: ①创建自定义分页组件Pager.vue:预设主题色为@themeColor: #D93844; 每页展示10条数据,一次最多显示5个页码,支持输入页码跳转: <template>   <div class="m-pager-wrap" v-if="totalCount">     <span class="u-text&

  • vue 指定组件缓存实例详解

    keep-alive 简介 keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染. 用法也很简单: <keep-alive> <component> <!-- 该组件将被缓存! --> </component> </keep-alive> props include - 字符串或正则表达,只有匹配的组件会被缓存 exclude - 字符串或正则表达式,任何匹配的组件都不会被缓存 // 组件 a export

  • vue分页器组件编写方法详解

    使用vue编写的分页器组件,支持输入页码跳转,效果如图: 1.点击前五页: 2.点击中间部分页面 3.点击第一页,上一页按钮失效,点击最后一页,下一页按钮失效 组件调用: //html调用 参数:pageSize(总页数);pageNo(当前页) <pager :pageSize="pageSize" v-model="pageNo" @on-jump="jump"></pager> //组件引入 import pager

  • JavaScript分页组件使用方法详解

    分页组件是web开发中常见的组件,请完成pagination函数,在id为jsPagination的DOM元素中完成分页的显示部分,需求如下 1.最多连续显示5页,居中高亮显示current页(如demo1所示) 2.total为0时,隐藏整个元素(如demo2所示) 3.如果total<=5,则显示全部页数,隐藏"首页"和"末页"元素(如demo3所示) 4.当current居中不足5页,向后(前)补足5页,隐藏"首页"("末页

  • vue验证码组件使用方法详解

    本文实例为大家分享了vue验证码组件使用的具体实现代码,供大家参考,具体内容如下 代码如下: <template> <div class="join_formitem"> <label class="enquiry">验证码<span>:</span></label> <div class="captcha"> <input type="text&

  • Vue对话框组件使用方法详解

    本文实例为大家分享了Vue对话框组件的使用,供大家参考,具体内容如下 效果如下图所示:(整体样式模仿ant-design-vue Modal样式,同时阴影覆盖浏览器窗口) ①创建组件Dialog.vue: <template>   <div class="m-dialog-mask">     <div class="m-modal">       <div class="m-modal-content"

  • Vue 自定义组件 v-model 使用详解

    目录 Vue2中使用 Vue3中使用 v-model 使用 modelValue 自定义 v-model 的使用的参数 多个 v-model 绑定 自定义v-model 的修饰符 Vue2中使用 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value attribute 用于不同的目的.model 选项可以用来避免这样的冲突: Vue.component('base-checkbox', { m

  • vue component组件使用方法详解

    什么是组件 按照惯例,引用Vue官网的一句话: 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件component的注册 全局组件: Vue.component('todo-item',{ props:['grocery'], template:'<li>{{grocery.te

随机推荐