说明

分类：前端

日期：2020年11月10日

点击数：700

技术：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>

 

这样完美解决问题。

 

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