- 说明
- 分类:前端
- 点击数:682
11月9日上午,网友爆料浙江衢州一化工厂发生爆炸,网传视频显示,现场浓烟滚滚,并传出爆炸声。中午,衢州宣传部工作人员告诉东方网·纵相新闻记者,目前火势已得到控制,暂无发现有毒气体。
专家告诉记者,有机硅燃烧会产生大量浓烟、粉尘、刺激性和腐蚀气体,相对其它化学物质而言毒性较小,市民可戴口罩防护。
- 说明
- 分类:前端
- 点击数:1035
技术: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>
这样完美解决问题。
推荐使用第二种方法。这样减少了一次子组件的更新渲染。