技术:vue+element-ui

 问题:el-pagination可以很好地分页,但是如果路由是再第二页,刷新页面后内容也是第二页的内容,路由参数也是第二页,但就是el-pagination会重新回到第一页,

分析:el-pagination刷新重新返回第一页是因为父组件和子组件的创建顺序造成的。

父子组件的执行顺序:

父组件:beforeCreate=》父组件:created=》父组件:beforeMount=》子组件:beforeCreate=》子组件Created=》子组件beforeMount=》子组件mounted=》父组件:mounted

父子组件的销毁顺序:

父组件:beforeDestroy=》子组件:beforeDestroy=》子组件:destroyed=》父组件:destroyed

父子组件更新顺序:

父组件:beforeUpdate=》子组件:beforeUpdate=》子组件:updated=》父组件:updated

 

一、使用

本次使用的环境是建立通常的内容维护系统,增删改不是使用的弹窗,而是使用的路由跳转。

新增操作:信息列表页=》点击新增按钮=》路由切换到新增页面=》新增完成保存=》路由跳转到原来的列表页。

查看操作:信息列表页=》点击查看详情=》路由切换到详细页面=》详细页面点击返回=》路由跳转到原来的列表页

编辑操作:信息列表页=》点击编辑操作=》路由切换到编辑页面=》编辑页面保存后=》路由跳转到原来的列表页

问题:el-pagination可以很好地分页,但是如果路由是再第二页,刷新页面后内容也是第二页的内容,路由参数也是第二页,但就是el-pagination会重新回到第一页,

分析:el-pagination刷新重新返回第一页是因为父组件和子组件的创建顺序造成的。

父子组件的执行顺序:

父组件:beforeCreate=》父组件:created=》父组件:beforeMount=》子组件:beforeCreate=》子组件Created=》子组件beforeMount=》子组件mounted=》父组件:mounted

父子组件的销毁顺序:

父组件:beforeDestroy=》子组件:beforeDestroy=》子组件:destroyed=》父组件:destroyed

父子组件更新顺序:

父组件:beforeUpdate=》子组件:beforeUpdate=》子组件:updated=》父组件:updated

***********************************

 

<el-pagination
        align="center"
        @size-change="pageSizeChange"
        @current-change="pageIndexChange"
        :current-page.sync="queryStr_pageIndex"
        :page-sizes="[15,

 

30, 50, 100]" :page-size.sync="queryStr_pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount" ></el-pagination>

页面内容渲染:

  mounted() {
    this.listEnvironmentInfo();
  },

上面这种方式是将页面内容渲染放在的mounted函数中,也就是父组件中,按照父子执行顺序,刷新页面后,先执行的是子组件el-pagination的创建和渲染,子组件完成之后再完成父组件,内容渲染之前子组件所有的值回到的了初始值,所以回重返第一页。

 

解决上面的问题有两种:

第一种:

一个是渲染内容仍然在父组件的mounted中,在模板中的el-pagination组件增加内容v-if="totalCount!=0",改成:

<el-pagination
        align="center"
        @size-change="pageSizeChange"
        @current-change="pageIndexChange"
        :current-page.sync="queryStr_pageIndex"
        :page-sizes="[15, 30, 50, 100]"
        :page-size.sync="queryStr_pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        v-if="totalCount!=0"
      ></el-pagination>

 

这种方式的原理是强制在父组件完成渲染的时候,子组件分页组件根据totalCount的值更新下数据,而这个时候子组件分页组件的分页数据回用新的值覆盖初始默认值。这个方法可以解决问题。

第二种:

按照父子组件执行顺序的思路解决,将父组件的渲染内容放在子组件也就是分页组件创建之前,这里放在父组件创建的时候整理页面的数据。

  created() {
    this.listEnvironmentInfo();
  },

子组件在模板中的写法不使用v-if=“totalCount=0”

<el-pagination
        align="center"
        @size-change="pageSizeChange"
        @current-change="pageIndexChange"
        :current-page.sync="queryStr_pageIndex"
        :page-sizes="[15, 30, 50, 100]"
        :page-size.sync="queryStr_pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>

 

这样完美解决问题。

 

推荐使用第二种方法。这样减少了一次子组件的更新渲染。