持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

el-pagination的常用的两个自带事件

@current-change默认传递跳转后的page参数

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

hCurrentChange(page) {
      // (1)改变请求页面参数page
      this.pageParams.page = page
      // (2)重发请求渲染页面
      this.loadRoles()
    }

@size-change默认传递更改后的pagesize

<el-pagination layout="total, sizes, prev, pager, next, jumper"
:page-sizes="[5,10,15,20]"
:page-size="size"
:total="total"
@size-change="hSizeChange"
@current-change="hCurrentChange" />

    // 3.3 页码大小改变
    hSizeChange(cursize) {
      this.size = cursize
      this.page = 1
      // 加载页面
      this.loadEmployees()
    },

删除数据后当页为空,到前一页

背景:

• 当我们删除时,会出现一个bug,
• 当前页只有一项数据时,如果删除该项数据,那么当前页就没有数据了,显示为空,这样是不对的
• 产生这样的原因是,虽然删除数据后,重新渲染了界面,但是请求的页码page还是当前页,但是当前页已经没有 数据了
• 所以要对页码page处理,处理如下

如果当前页长度为一,则跳转上一页,

跳转上一页,page--

但是页码不能小于1

所以page = Math.max(1, page)

最后绑定数据到data,this.pageParams.page = page

 async doDel(id) {
      try {
        const res = await doDel(id)
        console.log(res)
        // 1. 提示
        this.$message.success('删除成功')

        // 如果删除是最后一条数据，则页码要-1
        if (this.roles.length === 1) {
          let page = this.pageParams.page
          page--
          // 页码不能减是0
          // if (this.pageParams.page === 0) {
          //   this.pageParams.page = 1
          // }
          page = Math.max(1, page)
          this.pageParams.page = page
        }

        // 3. 重新请求
        this.loadRoles()
      } catch (err) {
        console.log(err)
      }
    },

添加数据跳转最后一页

• 当我们新增一个新的数据时,刷新页面,还是当前页面
• 看不到新增的数据
• 如果想要看到新增的数据,就要对page进行处理
• 处理如下:

增加数据

this.total++ 总数加1

跳转到最后一页

this.pageParams.page = Math.ceil((this.total) / this.pageParams.pagesize)

    // 3.新增
    async doAdd() {
      try {
        const res = await addRole(this.roleForm)
        console.log(res)
        this.total++// 总数加1
        // 跳转到最后一页
        this.pageParams.page = Math.ceil((this.total) / this.pageParams.pagesize)
        this.loadRoles()
        this.$message.success('添加成功')
        this.showDialog = false
      } catch (err) {
        this.$message.error('添加失败')
        console.log(err)
      }
    },

分页下标同步跳转 :current-page.sync="pageParams.page"`

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