问题

  • 使用ant design vue 的tab组件,每一个tab组件都有一个分页器pagination对象
  • 可以看到,我设置了默认tab项目为图片,这里的分页器按照了我要求显示

正常情况

  • 但是我一切换到其他tab,其他tab页面分页器显示就不正常

不正常的分页显示

分析

  • 可以看到ant design vue实现tab的原理就是v-if

  • 当没有轮到我们选择的tab项的时候,就不渲染,完全隐藏了(v-if也是一样的)

  • 所以问题就很有可能是渲染的原因

解决

  • 定位了问题,看看官方api文档有没有不使用v-if的办法
  • 可以看到,有一个forceRender属性在每一个tab项当中,我们试试看

  • 添加,重新查看效果

  • bug成功解决