问答

vue用elementUI,写一个页面多个分页Pagination怎么写

作者:admin 2021-07-09 我要评论

我的部分代码 第一个分页 div class="paging" el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPageNum" :page-si...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

我的部分代码
第一个分页

<div class="paging">
                <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPageNum"
                  :page-size="pageSize"
                  layout="total,slot,prev"
                  :total="this.solveLists.length"
                >
                  <el-button
                    :disabled="firstPageBtnDisabled"
                    class="first-pager"
                    @click="toFirstPage"
                  >首页</el-button>
                </el-pagination>
                <el-pagination
                  background
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPageNum"
                  :page-size="pageSize"
                  layout="pager,next,slot,jumper"
                  :total="this.solveLists.length"
                >
                  <el-button
                    :disabled="lastPageBtnDisabled"
                    class="last-pager"
                    @click="toLastPage"
                  >末页</el-button>
                </el-pagination>
              </div>

第二个分页

<div class="paging">
                <el-pagination
                  background
                  @current-change="handleCurrentChange1"
                  :current-page.sync="currentPageNum1"
                  :page-size="pageSize1"
                  layout="total,slot,prev"
                  :total="this.hotLists.length"
                >
                  <el-button
                    :disabled="firstPageBtnDisabled1"
                    class="first-pager"
                    @click="toFirstPage1"
                  >首页</el-button>
                </el-pagination>
                <el-pagination
                  background
                  @current-change="handleCurrentChange1"
                  :current-page.sync="currentPageNum1"
                  :page-size="pageSize1"
                  layout="pager,next,slot,jumper"
                  :total="this.hotLists.length"
                >
                  <el-button
                    :disabled="lastPageBtnDisabled1"
                    class="last-pager"
                    @click="toLastPage1"
                  >末页</el-button>
                </el-pagination>
              </div>

data里面(关于两个分页的参数全部后面加1,很傻的办法)

 // 分页
  //第一个
      pageSize: 4,
      currentPageNum: 1,
      total: 1,
      firstPageBtnDisabled: true,
      lastPageBtnDisabled: false,
      lastPageNum: Math.ceil(this.total / this.pageSize),
  //第二个
      pageSize1: 4,
      currentPageNum1: 1,
      total1: 1,
      firstPageBtnDisabled1: true,
      lastPageBtnDisabled1: false,
      lastPageNum1: Math.ceil(this.total1 / this.pageSize1)

methods里面(关于分页切换按钮,就只是参数变了)

// 分页功能

    handleCurrentChange(val) {
      this.firstPageBtnDisabled = val === 1 ? true : false;
      this.lastPageBtnDisabled = val === this.lastPageNum ? true : false;
      this.currentPageNum = val;
      console.log(val);
      this.$emit("handleCurrentChangeSub", val);
      //  切换锚点
      if (val == this.oldNum) {
      } else {
        this.oldNum = val;
        window.scrollTo(0, 300);
      }
    },
    toFirstPage(val) {
      this.handleCurrentChange(1);
    },
    toLastPage(val) {
      this.currentPageNum = this.lastPageNum;
      this.handleCurrentChange(this.lastPageNum);
    },
    // 分页功能
    handleCurrentChange1(val) {
      this.firstPageBtnDisabled1 = val === 1 ? true : false;
      this.lastPageBtnDisabled1 = val === this.lastPageNum1 ? true : false;
      this.currentPageNum1 = val;
      // console.log(this.firstPageBtnDisabled)
      this.$emit("handleCurrentChangeSub", val);
      // window.scrollTo(0, 300);
      //  切换锚点
      if (val == this.oldNum1) {
      } else {
        this.oldNum1 = val;
        window.scrollTo(0, 300);
      }
    },
    toFirstPage1(val) {
      this.handleCurrentChange1(1);
    },
    toLastPage1(val) {
      console.log(val)
      // let lastPageNum1=Math.ceil(this.hotLists.length / this.pageSize1)
      console.log(this.lastPageNum1)
      console.log(this.total1)

      // this.currentPageNum1 = this.lastPageNum1;
      this.handleCurrentChange1(this.lastPageNum1);
    }
  }

这一个页面只用了两个分页,我后面需要用到三个,四个分页,不可能再用这种憨憨办法了呀,有没有大佬教一下我

###

慢慢逐渐养成一切皆组件的思维,
这是个掌握:把重复代码块抽出来做成组件,方便复用的机会,好好把握。

具体细节点比较多,不在一问一答简单范畴,这里给你指个方向,加油!

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • elementUI表单Object.assign处理后无法

    elementUI表单Object.assign处理后无法

  • nacos作为配置中,有时可以加载到配置

    nacos作为配置中,有时可以加载到配置

  • font-spider压缩字体后,文件大小没有

    font-spider压缩字体后,文件大小没有

  • Vue SSR babel node_modules中的一个包

    Vue SSR babel node_modules中的一个包

腾讯云代理商
海外云服务器