element分页组件实现正确跳转到新增页面

657 阅读1分钟

在分页组件中加入属性:

<el-pagination
+       :current-page.sync="currentPage"
        layout="prev,pager,next"
        :page-size="pageParams.pagesize"
        :total="total"
        @current-change="hcurrentChange"
/>

在data中定义当前页码:currentPage

data(){
    return{
        currentPage: null
    }
}

增加计算属性,分别计算:新增页码、isLastPageFulled(最后一页是否是满页状态)

computed: {
    isLastPage() {
      const maxNum = Math.ceil(this.total / this.pageParams.pagesize)
      return this.pageParams.page === maxNum
    },
    maxNum() {
      return Math.ceil(this.total / this.pageParams.pagesize)
    },
    isLastPageFulled() {
      return this.total % this.pageParams.pagesize === 0
    }
  },

在添加按钮中绑定事件

 <el-button size="small" type="primary" @click="hSubmit">确定</el-button>

在事件的回调函数 (pageParams.page为当前页)

if (this.isLastPageFulled) {
          this.pageParams.page = this.maxNum + 1
        } else {
          this.pageParams.page = this.maxNum
        }
        this.loadRoles()

在删除按钮中绑定事件并加入:(需要用到点击一行的信息,要用到slot-scope)

<template slot-scope="scope">
    <el-button size="small" type="danger" @click="doDel(scope.row.id)">删除</el-button>
</template>
doDel(id) {
    ....
 if (this.rows.length === 1) {
          this.pageParams.page--
          if (this.pageParams.page <= 0) {
            this.pageParams.page = 1
          }
        }
   }