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

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

要实现的功能是这样的，每页6条数据，前翻页、后翻页可以分别往前、往后查看内容，分页组件的页码可以直接定位到某一页的内容。具体需求如下图所示：

1、首先写好页面结构，然后静态css写样式。完成这两步，开始数据渲染。

<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})">
                    <!-- </a> -->
                    <p>{{item.name}}</p>
                </li>
            </ul>
    
            <!-- 分页 -->
            <div class="block" @click="clickPage($event)">
                <!-- <span class="demonstration">页数较少时的效果</span> -->
                <el-pagination layout="prev, pager, next" :total="pagenum*10">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

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})">
                    <!-- </a> -->
                    <p>{{item.name}}</p>
                </li>
            </ul>
    
            <!-- 分页 -->
            <div class="block" @click="clickPage($event)">
                <!-- <span class="demonstration">页数较少时的效果</span> -->
                <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>