Element 自定义标签页(el-tab) 下的添加 el-badge 视图不渲染

最新推荐文章于 2024-04-29 17:57:53 发布

thinkingw770s

最新推荐文章于 2024-04-29 17:57:53 发布

阅读量3.4k

点赞数

本文链接：https://blog.youkuaiyun.com/thinkingw770s/article/details/102968000

版权

在Element UI中遇到自定义标签页el-tab内的el-badge视图未实时更新问题，解决方法是通过this.$children[0].$children[0].$forceUpdate()来强制更新组件的视图，确保el-badge的数据能够正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  <el-tab-pane label="证件类预警报警">
    <span slot="label">证件类预警报警<el-badge style="margin-left: 10px;" :value="pointData.infoProduceManagerCount" /></span>
  </el-tab-pane>
  <el-tab-pane label="产废">
    <span slot="label">产废<el-badge style="margin-left: 10px;" :value="pointData.infoStorageAreaCount" /></span>
  </el-tab-pane>
  <el-tab-pane label="存储">
    <span slot="label">存储<el-badge style="margin-left: 10px;" :value="pointData.infoThirdPartCarCount" /></span>
  </el-tab-pane>
  <el-tab-pane label="运输">
    <span slot="label">运输<el-badge style="margin-left: 10px;" :value="pointData