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

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

<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>

效果如下