bug图

解决办法
只能修改组件源码才能解决这个问题了。
在tabItem的mixins的childMixin中修改:
mounted () {
this.$nextTick(() => {
this.$parent.updateIndex()
})
},
updated () {
this.$nextTick(() => {
this.$parent.updateIndex()
})
}
PS:
上面的方法只是治标不治本,本人经过测试发现引起这个bug的主要原因是flex布局的flex-basis属性计算完成时vue的updated方法已经调用了!因此想要彻底解决这个bug就等数据加载完了之后再渲染tab组件。
本文介绍了一种解决Vue中Tab组件出现的bug的方法,该bug由flex布局的flex-basis属性计算与Vue更新周期不匹配引起。通过在组件源码中修改mount和update钩子,实现了在数据加载完成后渲染Tab组件,从而避免了问题的发生。
2726

被折叠的 条评论
为什么被折叠?



