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

淩亂°似流年 2023-09-27 20:07 101阅读 0赞

**目录**

简介

HTML部分

JS部分

--------------------

## 简介 ##

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

[Pagination 分页 | Element Plus][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>

[Pagination _ _ Element Plus]: https://element-plus.gitee.io/zh-CN/component/pagination.html

发表评论取消回复

表情：

评论列表（有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读

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

目录简介 HTML部分 JS部分 -------------------- 简介主要借助Element-Plus的Pagination分页显示功能，详情链接

淩亂°似流年/ 2023年09月27日 20:07/ 0 赞/ 102 阅读

相关分页功能

先说原理防百度底部分页前面5个，后面四个开始index 等于当前页-5 结束index 等于当前页+4 下面上核心代码 / 定义开始位置 /

傷城~/ 2023年05月30日 06:11/ 0 赞/ 116 阅读

相关数据库分页显示

一、SQL server的分页方法，用的SQL server 2012版本。下面都用pageIndex表示页数，pageSize表示一页包含的记录。并且下面涉及到具体例

Dear 丶/ 2023年02月22日 12:21/ 0 赞/ 121 阅读

相关 PHP实现分页功能（一）上一页/下一页（含有分类功能的分页）

以下方法是基于THINKPHP5框架开发，实现上一页/下一页按钮式的分页功能，如下图 ![在这里插入图片描述][20200917151500115.png_pic_cent

我会带着你远行/ 2022年12月08日 04:18/ 0 赞/ 475 阅读

相关分页功能

最初的时候没有涉及MVC模式的时候，我做分页就是在jsp页面上进行分页，在后面的时候分页我就和页面分开，只是输出分页的信息完成分页，最后分页使用的是hibernate实现分页。

深碍√TFBOYSˉ_/ 2022年06月16日 11:16/ 0 赞/ 340 阅读

相关 SSH实现数据分页显示功能

之前使用许多技术做过数据的分页显示功能,像pager-taglib分页框架,还有许多前端技术自带的分页.但很少使用框架自己尝试写分页,剖析分页的原理.现在自己实现一个数据分页

「爱情、让人受尽委屈。」/ 2022年06月07日 05:21/ 0 赞/ 409 阅读

相关 layui的数据表格+springmvc实现数据显示，分页功能

在做分享圈项目后台时，用的是layui提供的后端页面框架，页面挺好看的。下载layui包：组装我们想要的页面，[layui在线示例 ][layui_ _ _

分手后的思念是犯贱/ 2022年05月24日 03:35/ 0 赞/ 451 阅读

相关 jsp+jdbc+javaBean+servlet实现分页显示功能

数据库中的数据表数据如下： ![20180602144151480][] javaBean: 建立Page类用来存储从数据库查询到的数据信息和当前页面信息。

深藏阁楼爱情的钟/ 2022年05月23日 04:59/ 0 赞/ 318 阅读

相关分页下方页签的显示

可以拷贝该html文件直接运行. 就可以显示分页页签的效果初始化界面如下: ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

小鱼儿/ 2022年05月13日 04:44/ 0 赞/ 324 阅读

相关 Django--分页功能

Django--分页功能 > 需要用到django中的Paginator模块 > > 导入：from django.core.paginator import Pagi

落日映苍穹つ/ 2021年12月23日 16:29/ 0 赞/ 475 阅读