vue简单版分页功能实现

vue简单版分页功能实现

功能介绍:

将数据(n条)进行划分,根据所在页面展示对应页面的数据。如 有100条数据,每一页展示10条,总共就就是100/10 = 10页。

功能实现逻辑: 1.准备静态页面, 分页块需要 上一页 1 2 3 下一页,这种格式。

2.准备data数据块,定义需要的变量。如需要按照每页展示5条数据,定一个a变量,还需要准备一个总页数(总页数=总的数据/每页展示数据)向上取整得来,定一个b变量接受, 还需要一个根据总的数据计算后的,接受显示数据的变量,还需要准备初始页码d,到这变量准备就绪。

3.进行@click事件,上一页,需要做判断,当当前页码不等于1时,让当前页码进行--操作。下一页,也需要判断,当当前页码小于总页码时,让当前页码进行++操作, 点击所处页码也需要做判断,将你点击的页码赋值你所在页码的值。

功能实现代码: html代码块

<div id="app">
        <div class="conTable">
            <table>
                <tr>
                    <th>ID</th>
                    <th>数量</th>
                    <th>分类</th>
                    <th>开始时间</th>
                    <th>结束时间</th>
                </tr>
                <tr v-for="item in pageNumber" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.number}}</td>
                    <td>{{item.classification}}</td>
                    <td>{{item.startTime}}</td>
                    <td>{{item.endTime}}</td>
                </tr>
            </table>
        </div>
        <div class="pading">
            <div class="pravPage" @click="pravPage">上一页</div>
            <div class="pages" v-for="(item, index) in pageCount" @click="page(item)"> 
                <div :class="item==pageNum ? 'acv':'active'" >{{item}}</div>
            </div>
            <div class="nextPage" @click="nexTpage">下一页</div>
        </div>
    </div>

css代码块

#app{
    background: #cdcdcd;
}
.conTable{
    height: 250px;
    color: #223a5c;
}
table{
    width: 800px;
    line-height: 27px;
    text-align: center;
    margin: auto;
    padding-top: 20px;
}
.pading{
    display: flex;
    justify-content: right;
    font-size: 18px;
    font-weight: bold;
    padding-right: 20px;
    background: #d2d8d6;
}
.pading>div:first-child,
.pading>div:last-child{
    width: 80px;
    font-size: 14px;
    background: #ebb470;
    margin-right: 6px;
    margin-left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pading>div:first-child:hover,
.pading>div:last-child:hover{
    background: #eaeaea;
}
.pages{
    display: flex;
}
.active{
    width: 25px;
    height: 25px;
    border: 2px solid #020202;
    border-radius: 5px;
    margin: 0 2px;
    text-align: center;
    color: #f00;
}
.acv{
    width: 25px;
    height: 25px;
    border: 2px solid #eaeaea;
    background: #40472b;
    border-radius: 5px;
    margin: 0 2px;
    text-align: center;
    color: #fff;
}


script代码块

 <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    pageNum: 1, // 页码
                    pageSize: 5, // 每页显示5条数据
                    pageCount: '', // 总页数
                    pageNumber:[], // 处理后用于展示的数据
                    // paging:[{},{},{},{},{}...], 多条结构
                    paging: [{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' }//这只是一条数据,需要多条模拟,可以多复制
                    ],
                }
            },
            created(){
                this.pageCount = Math.ceil(this.paging.length/this.pageSize); 
                // Math.ceil(向上取整) Math.floor(向下取整)
                this.page(this.pageNum)
            },
            methods: {
                page(item){ //当前页
                    this.pageNum = item
                    // pageNum=1 => 0第一组数据的第一个索引号; 2 => 10第二组数据的第一个索引号
                    let list = (this.pageNum -1)*this.pageSize; //拿到新一组的索引
                    // 获取每组所需要的5条数据
                    // slice(开始索引号,截取多少个长度)
                    this.pageNumber = this.paging.slice(list, list+this.pageSize)

                },
                pravPage(){ //上一页
                    if(this.pageNum != 1){
                        this.pageNum --;
                        this.page(this.pageNum)
                    }
                },
                nexTpage(){ //下一页
                    if(this.pageNum < this.pageCount){
                        this.pageNum ++;
                        this.page(this.pageNum)
                    }
                }
            }
        })
    </script>
    //别忘记引入vue.js啊!!!

posted @   布衣梦蝶1978  阅读(316)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示