element-ui Pagination分页只保留上一页下一页

傷城~ 2023-10-04 19:41 65阅读 0赞

有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。具体做法来看一下吧

<pagination
          v-show="total>1"
          :total="total"
          :layout.sync="layout"
          prev-text="上一页"
          next-text="下一页"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.limit"
          @pagination="getList"
        />

逻辑实现

<script>
       export default {
        
       		data() {
        
                return {
        
                	// 遮罩层
                	loading: false
                    // 总条数
                    total: 0,
                    // 组件布局，只保留页大小、上一页、下一页
                    layout: 'sizes, prev, next',
                    // 查询参数
                    queryParams: {
        
                        page: 1,
                        limit: 10,
                    },
                }
            },
           	created() {
        
                this.getList();
            },
            methods: {
        
                /** 查询参数列表 */
                getList() {
        
                    this.loading = true;
                    //后台查询
                    getList(this.queryParams).then(response => {
        
                        this.dataList = response.data;
                        this.total = response.count;
                        this.loading = false;
                    });
                },
           }
      }
    </script>

增加边距，也可以自行美化

<style lang="scss" scoped>
      ::v-deep {
        
        .el-pagination span:not([class*=suffix]){
        
          padding: 0 10px;
        }
      }
    </style>

效果如下  
![在这里插入图片描述][dd6bebf5d420483499e757caad7fbcc6.png]

[dd6bebf5d420483499e757caad7fbcc6.png]: https://img-blog.csdnimg.cn/dd6bebf5d420483499e757caad7fbcc6.png

发表评论取消回复

表情：

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

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

相关阅读

相关 element-ui Pagination分页只保留上一页下一页

有时数据量太大，比如日志数据没必要查看很久之前的，所以把页数屏蔽，不给系统造成卡顿，最简单的方式就是隐藏总条数、页数。具体做法来看一下吧 <pagination

傷城~/ 2023年10月04日 19:41/ 0 赞/ 66 阅读

相关 elementUI的el-pagination分页

<el-pagination :current-page="pagination.currentPage"

忘是亡心i/ 2023年07月13日 08:28/ 0 赞/ 41 阅读

相关 ElementUI 分页

一、概述当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。本次所使用

谁借莪１个温暖的怀抱￠/ 2023年01月11日 13:03/ 0 赞/ 237 阅读

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

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

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

相关 php上下页翻页,php实现网页上一页下一页翻页过程详解

前言这几天做项目因为数据太多，需要对信息进行上下翻页展示，就自己写了翻页的代码大致功能就是页面只显示几条信息，按上一页、下一页切换内容，当显示第一页时上一页和首页选项不

╰+攻爆jí腚メ/ 2022年11月19日 04:05/ 0 赞/ 310 阅读

相关 Mybatis：pageHelper+elementUI-el-pagination实现分页

分页是一个很常用的东西，今天就用Mybatis+elementUI实现分页实现了一下分页。 html: 事件解释 @size-change：当每页显示的条数发生改变是

怼烎@/ 2022年05月19日 08:11/ 0 赞/ 475 阅读

相关 Data-Pagination 分页

![20190123201842997.png][] <!--设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一

r囧r小猫/ 2022年04月23日 04:40/ 0 赞/ 398 阅读

相关 elementUI分页器Pagination自动到第一页

当数据量过多时，使用分页分解数据，想让分页的页数自动回到第一页怎么设置。 <div class="pagination"> <el-pagination

亦凉/ 2022年02月03日 00:37/ 0 赞/ 620 阅读

相关 Django Paginator 分页

1. 例1: 基础的分页 1). vim app01/views.py def users(request): from django.core.pagina

缺乏、安全感/ 2022年01月16日 12:47/ 0 赞/ 402 阅读

相关 JSP连接数据库分页（首页，上一页，下一页，尾页）

![1274498-20180305102321258-2092234864.png][] ![1274498-20180305102548874-1379

深藏阁楼爱情的钟/ 2021年09月29日 11:22/ 0 赞/ 853 阅读