解决el-pagination组件,current-page 绑定的数据变了,但是页面当前页码并没有变的问题

解决el-pagination组件,current-page 绑定的数据变了,但是页面当前页码并没有变的问题

​ element中el-pagination中,有时候会遇到,current-page设置为1,页面数据变化,但是页面对应的页码不变。这是element的分页bug,使用v-if绑定分页。每次搜索的时候就会注销掉一个分页的Dom,等数据刷新完毕,再渲染一个相同的分页,重新渲染必须放到$nextTick中。

1、数据源
data:{
    // 分页配置
    oPageConfig: {
      currentPage: 1,
      totalItems: 0,
      itemsPerPage: 20,
      perPageOptions: [20]
    },
    bPageShow: true
}
2、样式
<el-pagination
   :current-page="oPageConfig.currentPage"
   :page-sizes="oPageConfig.perPageOptions"
   :page-size="oPageConfig.itemsPerPage"
   layout="total, sizes, prev, pager, next, jumper"
   :total="oPageConfig.totalItems"
   @current-change="handlePageChange"
   v-if="bPageShow">
</el-pagination>
3、方法
methods:{
    search() {
      this.oSearchParams.iSearchPos = 0;  //搜索起始页
      this.oPageConf.currentPage = 1;
      this.bPageShow = false;
      this.getTableData();//获取表格数据
      this.$nextTick(()=>{
        this.bPageShow = true;
      });
    },
}
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值