admin管理员组

文章数量:1612063

解决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;
      });
    },
}

本文标签： 页码绑定组件页面数据

版权声明：本文标题：解决el-pagination组件，current-page 绑定的数据变了，但是页面当前页码并没有变的问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1728627421a1166673.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。