分页BUG(添加成功后跳转到最后一页)

最新推荐文章于 2024-05-09 11:15:24 发布

aichixiangcaia

最新推荐文章于 2024-05-09 11:15:24 发布

阅读量894

点赞数 2

CC 4.0 BY-SA版权

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/aichixiangcaia/article/details/120962353

<el-pagination
            :current-page.sync="curpage"
            :page-sizes="[2, 5, 8, 10]"
            :page-size.sync="paramsPage.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />

1. 给子组件中设置 :current-page.sync属性

 data() {
    return {
      list: [], // 表格数据,
      total: 0, // 数据总条数
      paramsPage: { page: 1, size: 10 },
      showDialog: false, // 弹框默认关闭
      curpage: 1 // 默认当前页为1

2. 在data 中声明 curpage 默认值

  // 新增员工
    upUser() {
      // 关闭弹框
      this.showDialog = false
      // 提示信息
      this.$message.success('新增员工成功')
      // 渲染页面

      this.paramsPage.page = Math.ceil(++this.total / this.paramsPage.size)

      this.dogetRoles()
    },

3. 添加成功事件中 (父组件的自定义事件)

this.paramsPage.page = Math.ceil(++this.total / this.paramsPage.size)