细节复盘4 （使用elementUI的Pagination 分页组件&实现数据分页功能）2020-8-4

刺骨的言语ヽ痛彻心扉 2023-03-05 03:22 4阅读 0赞

今天使用elementUI的Pagination 分页这个组件模块，写了分页。

要实现的功能是这样的，每页6条数据，前翻页、后翻页可以分别往前、往后查看内容，分页组件的页码可以直接定位到某一页的内容。具体需求如下图所示：  
![在这里插入图片描述][20200804115259495.gif]  
1、首先写好页面结构，然后静态css写样式。完成这两步，开始数据渲染。

2、先获取数据，因为数据从后台拿或者从mock假数据拿，因人而异，不再展示。  
3、然后开始做分页功能。我是通过两个变量控制`pagenum：分页的总页数`和`每页展示的数据(依赖变量page)`，初始化都为0；

data() { 
        return { 
            page: 0,
            pagenum:0
        }
    },

4、pagenum是用来统计页码总数的。通过处理获取到的数据，得到数据总条数，因为一页展示6条，最后的一页即便不是6条，也要被当成一页，所以向上取整。（我这儿是一次性请求所有数据，然后分页功能展示）

let tem=this.$store.state.comicStore.comicMainData.data.comicItems.length;
    this.pagenum=Math.ceil(tem/6);

5、然后通过方法来控制每页展示的数据。

// 分页，通过vue的动态数据更新获取得到是第几页，然后页面渲染这一页的内容
    // 通过page控制展示哪一页的内容
    pagesep(page) { 
        return this.receiveCartoon.slice(page * 6, 6 + page * 6)
    },
    // 事件委托，点击分页组件，通过e.target获取不同的事件源，然后处理不同的逻辑
    clickPage(e) { 
    	// 点击页码
        if (e.target.innerHTML) { 
            this.page=e.target.innerHTML-1;//获取到的文本转化成数值，因为数据渲染用的是数组，而数组下标0开始，所以减一
        } else { 
        // 点击左右箭头
            if(e.target.className=="el-icon el-icon-arrow-left"){ 
                if(this.page--<=0)this.page=0;
            }
            if(e.target.className=="el-icon el-icon-arrow-right"){ 
                if(this.page++>=(this.pagenum-1))this.page=this.pagenum-1;     
            }
        }
    }

完整代码如下：

<template>
        <div class="ListComic">
            <div v-if="!receiveCartoon">数据加载中。。。</div>
            <div v-else>
                <ul>
                    <li v-for="(item,index) in pagesep(page)" :key="index">
                        <img :src="item.imgSrc" alt="作品图片" @click="newRouterTo('/Detailcomic',{name:item.name})">
                        
                        <p>{
       {item.name}}</p>
                    </li>
                </ul>
        
                
                <div class="block" @click="clickPage($event)">
                    
                    <el-pagination layout="prev, pager, next" :total="pagenum*10">
                    </el-pagination>
                </div>
            </div>
        </div>
    </template>
    
    <script> export default { data() { return { page: 0, pagenum:0 } }, methods: { // 分页，通过vue的动态数据更新获取得到是第几页，然后页面渲染这一页的内容 pagesep(page) { return this.receiveCartoon.slice(page * 6, 6 + page * 6) }, // 事件委托 clickPage(e) { if (e.target.innerHTML) { this.page=e.target.innerHTML-1;//获取到的文本转化成数值，因为前面数组下标0开始，所以减一 } else { if(e.target.className=="el-icon el-icon-arrow-left"){ if(this.page--<=0)this.page=0; } if(e.target.className=="el-icon el-icon-arrow-right"){ if(this.page++>=(this.pagenum-1))this.page=this.pagenum-1; } } }, // 打开空白页 toNewBlank(routerPath, query) { let routeData = this.$router.resolve({ path: routerPath, query: query }); window.open(routeData.href, '_blank'); }, // 去一个新路由页面，没有target=_blank的功能 newRouterTo(routerPath, query) { this.$router.push({ path: routerPath, query: query }); } }, created() { this.$store.dispatch("comicAxiosAct"); this.$store.state.comicStore.comicState = true;//修改vuex中的数据，应该用mutations来修改 }, destroyed() { this.$store.state.comicStore.comicState = false; }, computed: { receiveCartoon() { if(!this.$store.state.comicStore.comicMainData)return false; // 记录分页页数 let tem=this.$store.state.comicStore.comicMainData.data.comicItems.length; this.pagenum=Math.ceil(tem/6); // 返回获取到的数据 return this.$store.state.comicStore.comicMainData.data.comicItems; } }, } </script>
    
    <style scoped> .ListComic { padding: .15rem 0 .15rem .10rem; min-height: 1.8rem; margin-top: 0.9rem; } .ListComic ul { display: flex; justify-content: space-around; flex-wrap: wrap; min-height: 3.92rem; } .ListComic ul li { width: 1.2rem; height: 1.8rem; margin-bottom: .155rem; } .ListComic ul li:nth-last-child(1) { flex: 1; } .ListComic ul li img { height: 1.53rem; } .ListComic ul li p { line-height: .22rem; width: 1.145rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: .145rem; color: #333; margin-top: .05rem; } /* 分页 */ .block { text-align: center; } </style>

[20200804115259495.gif]: /images/20230208/45c8d2720eb244f98eb713b67f6b5caa.png