首页 > 技术文章 > elemengui分页

pretttyboy 2020-11-24 11:28 原文

<!-- 分页模块 -->
    <template>
      <div class="block" style="margin-top:20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>
  handleSizeChange(pageSize) {
       this.pageSize = pageSize 
       this.getAccountOrders()
      },
      handleCurrentChange(current) {
        this.current = current ;
        this.getAccountOrders()
      },
      // 获取用户订单信息
      getAccountOrders(){
        this.accountId = this.$route.query.id
        let params = '?current='+this.current+'&page_size='+this.pageSize
        this.$http.get(baseUrl+'/order/'+this.accountId + params)
        .then(res =>{
          if(res.data.code == 200 ){
              let data = res.data.data ;
              this.tableDatas = data.pages.records ;
              this.current = data.pages.current ;
              this.pageSize = data.pages.size ;
              this.total = data.pages.total ;

              if(this.current == 1 ){
                  this.accountForm = data.account ;
              }
          }
        })
        .catch((e) => {
          console.log(e)
        })

      },

 

推荐阅读