关于element tab组件使用自定义标签加入el-badge时无法更新数值问题

最近在使用tab组件发现嵌入el-badge时获取到了数值,但是el-badge显示的还是初始值,没有及时更新,点击了tab页后,数值才更新。

相关代码如下:

 
待认领任务

最初显示效果如下:

关于element tab组件使用自定义标签加入el-badge时无法更新数值问题_第1张图片

关于element tab组件使用自定义标签加入el-badge时无法更新数值问题_第2张图片

解决方法:

在获取到num值之后,加上以下一行代码就可以了

          this.$children[0].$children[0].$forceUpdate()

原理:

通过找到el-badge 父组件的dom节点使用$forceUpdate()方法即能更新数值

最终效果如下图

关于element tab组件使用自定义标签加入el-badge时无法更新数值问题_第3张图片

你可能感兴趣的:(ElementUI,element,vue,el-tab,el-badge)