利用Vue模拟实现element-ui的分页器效果

目录
  • 1. 思路
    • 1.1客户端
    • 1.2服务器
  • 2.服务器
    • 2.1创建数据
    • 2.2创建接口
  • 3.客户端
    • 3.1创建静态页面
    • 3.2请求数据
    • 3.3解析逻辑
  • 4.总结

1. 思路

1.1客户端

利用vue相关的知识搭建基本页面,

上面四张图片,下面是分页器基本

效果静态显示。点击分页器实现

不同数据请求,显示不同图片

1.2服务器

根据客户端发送的数据进行数据

分段传输,比如,点击的是那一页

分页器每次需要展示几个数据,

2.服务器

创建数据(存放图片的网址,以及id)

创建接口,发送数据。

2.1创建数据

创建一个文件夹,下载express

npm i express

在该文件先创建一个

images.json文件使用

[
    {
     "id":1,
     "imgUrl":"图片网址"
    },
    {
     "id":2,
     "imgUrl":"图片网址"
    }
     .
     .
     .
     .
]

2.2创建接口

根据得到pageNo(用于显示在第几页),pageSize(一页显示多少数据)

比如在第一页,那么就是数组的第0项到第四项(pageSize)

采用切片的方法,我们可以得到一个等式及

每一项的开始值为当前页减一在乘与pageSize

start=(pageNo-1)*pageSize

const express=require('express')
const fs=require('fs')
const app=express()
fs.readFile('./images.json',(err,data)=>{
    if(err) return console.log(err)
    let result=JSON.parse(data)
    app.get('/imgsDate',(req,res)=>{

        let start=0

        let {pageNo,pageSize}=req.query

        start=(pageNo-1)*pageSize

        let end=parseInt(start)+parseInt(pageSize)

        //解决跨域问题
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Headers', '*');
        console.log(start,end)

        //用于分段传输数据(切片方法一次传递4条数据)
        let data=result.slice(start,end)

        res.send({data,total:result.length})
    })
})

app.listen(8000,()=>{
    console.log("开启成功")
})

结果展示:

3.客户端

需要完成的三大步

1.创建基本静态页面

2.请求数据展示

3.创建逻辑方法

3.1创建静态页面

home组件内包含分页器组件

<ul >
   <li><img src=""></li>
</ul>
 <pagetionItem/>

分页器组件

<div class="pagination">
        <button  >上一页</button>
        <button >1</button>
        <button >.....</button>

        <!-- 中间连续页码的地方:v-for、数组、对象、数字、字符串 -->
        <button></button>

        <button v-if="startAndEnd.end<totalPage-1">......</button>
        <button>总页数</button>

        <button >下一页</button>

        <button style="margin-left: 30px">共 {{}} 条</button>
</div>

3.2请求数据

根据前面的内容,我们需要两个参数pageNo,pageSize

home组件逻辑

 <template >
    <div>
        <ul v-for="img in imgs" :key="img.id">
            <li><img :src="img.imgUrl"></li>
        </ul>
        <pagetionItem
        :pageNo="searchParams.pageNo"
        :pageSize="searchParams.pageSize"
        :total='total'
        :pagerCount='5'
        class="page"
        @getPages="getPages"/>
    </div>
</template>

data() {
        return {
            //得到数据
            imgs: [],
            //总数
            total:null,
            //请求参数
            searchParams: {
                pageNo: 3,
                pageSize: 4
            }
        }
    },
    created() {
        this.img()
    },
    methods: {
        async img() {
            let result = await axios.get("http://localhost:8000/imgsDate",
                {
                    params: {
                        pageNo: this.searchParams.pageNo,
                        pageSize: this.searchParams.pageSize
                    }
                })
            this.imgs = result.data.data
            this.total=result.data.total
        },
        //用于处理分页器传递的当前页数,利用全局总线得到数据
        getPages(pageNo){
        this.searchParams.pageNo=pageNo
        this.img()
        }
    }

分页器组件

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

        <!-- 中间连续页码的地方:v-for、数组、对象、数字、字符串 -->
        <button v-for="(page,index) in startAndEnd.end"
        :key="index" v-if="page >=startAndEnd.start"
        @click="$emit('getPages',page)" :class="{active:pageNo==page}">{{page}}</button>

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

        <button :disabled="pageNo==totalPage"
        @click="$emit('getPages',pageNo+1)">下一页</button>

        <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
</template>

<script>
export default {
    name: "pagetionItem",
    props: ["total", "pageSize", "pageNo", "pagerCount"],
    computed: {
        //分页器一共多少页【总条数/每页展示条数】
        totalPage() {
            //向上取整数
            return Math.ceil(this.total / this.pageSize);
        },
        //底下的代码是整个分页器最重要的地方[算出连续五个数字、开头、结尾]
        startAndEnd() {
            //算出连续页码:开始与结束这两个数字
            let start = 0,
                end = 0;
            const { totalPage, pagerCount, pageNo } = this;
            //特殊情况:总共页数小于连续页码数
            if (totalPage < pagerCount) {
                start = 1;
                end = totalPage;
            } else {
                //正常情况:分页器总页数大于连续页码数
                start = pageNo - parseInt(pagerCount / 2);
                end = pageNo + parseInt(pagerCount / 2);
                //约束start|end在合理范围之内
                //约束头部
                if (start < 1) {
                    start = 1;
                    end = pagerCount;
                }
                //约束尾部
                if (end > totalPage) {
                    end = totalPage;
                    start = totalPage - pagerCount + 1;
                }
            }
            return { start, end };
        },
    }
};

3.3解析逻辑

home组件,

在组件创建时实现方法,创建方法img

发送请求,等到相应的数据,

在home组件展示

分页器

1.利用全局总线和自定义时间,

当点击分页器的每一项时向home组件的getpage方法传输当前是第几页

2.分页器逻辑

总页数=全部数据  / 每一页展示的数据(向上取整)

下一页=当前页+1(当当前页=总页数时,禁止按钮点击事件)

上一页=当前页-1(当当前页=1,禁止按钮点击事件)

中间按钮显示:

两侧都有(....)

当数据的中间项-pizeSize

或者+pizeSize=等于第一项或者

等于最后一项时不显示

4.总结

1.学会了怎么根据请求参数,分段发送数据

2.学会了数据渲染与自定义事件与全局总线

3.学会了分页器的基本思想

到此这篇关于利用Vue模拟实现element-ui的分页器效果的文章就介绍到这了,更多相关Vue element-ui分页器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue+Element-ui前端实现分页效果

    本文实例为大家分享了vue+Element-ui前端实现分页效果的具体代码,供大家参考,具体内容如下 分页技术 分页技术的概念 分页就是将所有的数据分段展示给用户,用户看到的可能不是全部的数据,而是其中一部分,用户可以通过点击页码来查找自己需要的内容,也可以通过模糊查询获取符合内容的数据 分页的意义 分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数

  • Vue+element-ui 实现表格的分页功能示例

    本文介绍了Vue+element-ui 实现表格的分页功能示例,分享给大家,具体如下: 实现效果如下图所示: template部分: <el-table :data="tempList" :header-cell-style="rowClass" stripe border style="margin-bottom:14px;" :empty-text="emptyText"> <el-table-colum

  • vue+elementUI实现分页效果

    本文实例为大家分享了vue+elementUI实现分页效果的具体代码,供大家参考,具体内容如下 页面中渲染的数据不是所有数据,是需要展示的数据,即当前页的数据,默认第一页的数据,这里为showDate template中代码段(渲染数据) <div style="height:76vh;margin-top:1%">             <el-table :data="showData"                       style

  • vue + element-ui的分页问题实现

    背景介绍 最近比较空闲,公司的后台就想着把现在的后台管理系统给改版一下,说是以前的太难看了,用着也不好用,然后给我甩过来一个ant-design-pro的链接,说是他看这个就挺不错的. 我当时心里就想着,之前的那个项目混合在你们的java项目里,跟普通的jsp页面差不多,一下就是一大堆的css和js文件,看着我都害怕(好吧,我承认其实我都不敢看),这能加载的快了就奇了怪了.ant-design最初是为react设计的,ant-design-pro自然也是用react了,不得不说人家这个界面看着确

  • vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了. 1.本次所使用的是vue2.0+element-ui实现一个分页功能,element-ui这个组件特别丰富,分页中给我提供了一个Pagination 分页,使用Pagination 快速完成分页功能 最终效果展示 <div class="deit"> <div class="crumbs"> &l

  • 利用Vue模拟实现element-ui的分页器效果

    目录 1. 思路 1.1客户端 1.2服务器 2.服务器 2.1创建数据 2.2创建接口 3.客户端 3.1创建静态页面 3.2请求数据 3.3解析逻辑 4.总结 1. 思路 1.1客户端 利用vue相关的知识搭建基本页面, 上面四张图片,下面是分页器基本 效果静态显示.点击分页器实现 不同数据请求,显示不同图片 1.2服务器 根据客户端发送的数据进行数据 分段传输,比如,点击的是那一页 分页器每次需要展示几个数据, 2.服务器 创建数据(存放图片的网址,以及id) 创建接口,发送数据. 2.1

  • vue+Element ui实现照片墙效果

    本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码,供大家参考,具体内容如下 上面是我要实现的效果.直接上代码,简洁明了 1.前端视图代码 <div>   <el-upload     :file-list="fileList"     :headers="upload.headers"     :action="upload.url"     list-type="picture-card&qu

  • vue+Element ui实现照片墙效果

    本文实例为大家分享了vue+Element ui实现照片墙效果的具体代码,供大家参考,具体内容如下 上面是我要实现的效果.直接上代码,简洁明了 1.前端视图代码 <div>   <el-upload     :file-list="fileList"     :headers="upload.headers"     :action="upload.url"     list-type="picture-card&qu

  • Vue前端整合Element Ui的教程详解

    目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+

  • 利用JavaScript模拟京东快递单号查询效果

    1.上面放大框开始是隐藏的,当输入单号后,就显示,并且里面的内容是输入框的内容的字体的放大 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi

  • Vue系列之Element UI表单自定义校验规则

    目录 一.表单效验规则的使用 1.自定义效验规则介绍 2.绑定效验方法 3.添加效验 4.效验判断 5.清除效验规则 二.常见表单效验规则 (一)pattern验证 (二)validator.js文件中常见的验证方法 总结 一.表单效验规则的使用 1.自定义效验规则介绍 是否必填: required: true  ||   fasle 效验消息提示:message: "提示信息" 效验触发方式:trigger:"change"  ||  "blur&quo

  • vue中使用element ui的弹窗与echarts之间的问题详解

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-drawer title="分析图表"

  • 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理

    项目背景:物业管理后台,不同角色拥有不同权限 采用技术:Vue.js + Vuex + Element UI 实现 RBAC 权限管理需要后端接口支持,这里仅提供前端解决方案. 因代码篇幅较大,对代码进行了删减,文中 "..." 即为省略的一部分代码. 大致思路: 首先登录成功后,从后台拉取用户当前可显示的菜单和可用权限列表,分别将其存入 store 的 nav(菜单导航) 和 auth(用户可用权限) 中,在用户切换路由时,判断是否存在 auth ,如果不存在,则重新获取,判断当前访

  • 如何利用vue+element ui实现好看的登录界面

    目录 界面效果图 下面直接上代码: 附加背景图片 总结 闲暇之余使用vue+element ui制作了个登录界面 话不多说,先上 界面效果图 下面直接上代码: <template> <div class="loginbody"> <div class="logindata"> <div class="logintext"> <h2>Welcome</h2> </div&

  • Vue+Element ui 根据后台返回数据设置动态表头操作

    由于后端是多人开发,也没有规范数据格式,所有页面是我一个人开发,所以就会遇到同样的页面不同的返回数据格式问题. 一.根据element文档,利用prop属性绑定对应值,label绑定表头. html <el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%"> <template v-for="

随机推荐