element-ui回显分页器问题

280 阅读1分钟

问题

PC端中UI框架element-ui在开发中时常会用到,最近有功能需求,要回显上一页表格并保持当前分页状态时,需要设置组件pagination的current-page,但发现每次返回,虽然保证了当前的数据位置,但分页器却被初始化了,回到了默认的第一页。

尝试查找解决方案

根据某度上说,在total的值更新后不为0的情况下

1、pagination组件加上key(时间戳),每次都重新渲染
2、pagination组件上设置v-if,设置页码后控制v-if重新渲染(要使用nextTick)

为什么

其实上述的方法都是让组件重新渲染。

第一种,在Vue中利用组件的key在判断它的唯一性,如果修改key,Vue将认为这是一个新的组件,将被重新渲染。

第二种,利用v-if条件,不满足时销毁dom,满足时新增dom,完成重新渲染的功能。