基于Element-Plus的分页显示功能

目录

简介

HTML部分

JS部分

---

简介

主要借助Element-Plus的Pagination分页显示功能，详情链接如下：

Pagination 分页 | Element Plus

HTML部分

<el-pagination
        v-model:current-page=currentPage
        v-model:page-size=pageSize
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.articles.length"
        @size-change="sizeChange"
        @current-change="currentChange"
/>

JS部分

<script>
    export default {
        name: "MyBlog",
        data() {
            return {
                // 分页显示
                currentPage:1,// 首页（默认为第1页）
                pageSize:5,// 每页条数（默认5条）
                
                // 全部-文章-列表
                articles: [
                    {
                        articleId: 1,
                        title: "文章标题1",
                        authorId:0,
                        labelArray: ["java","python"],
                        zone: "知识分享",
                        content:
                            "这是一篇文章的摘要，这里只显示前50个字。这是一篇文章的摘要，这里只显示前50个字。",
                        pageview: 123,
                        likes: 45,
                        comments: 67,
                        pubDate: "2022-04-20 12:30",
                    },
                    {
                        articleId: 2,
                        title: "文章标题2",
                        authorId:0,
                        labelArray: ["java","python"],
                        zone: "杂谈趣事",
                        content:
                            "这是一篇文章的摘要，这里只显示前50个字。这是一篇文章的摘要，这里只显示前50个字。",
                        pageview: 123,
                        likes: 45,
                        comments: 67,
                        pubDate: "2023-04-20 12:30",
                    },
                ],
                // 分页展示-文章-列表
                articlesShow:[],
            };},
        methods: {
            // 页面参数(条数/页码)变化
            pageChange(){
                var startIndex = (this.currentPage-1)*this.pageSize;
                var endIndex = this.currentPage*this.pageSize-1;
                this.articlesShow = this.articles.slice(startIndex,endIndex);
            },
            // 每页条数变化
            sizeChange(){
                this.pageChange();
            },
            // 当前页变化
            currentChange(){
                this.pageChange();
            },
            // 获取博客文章（根据用户Id）
            getArticle(){
                // 通过axios获得articles对象数组
                // 获取分页展示内容
                this.pageChange();
            },
        },
    };
</script>