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

最新推荐文章于 2024-08-07 18:21:52 发布

音浪豆豆_Rachel

最新推荐文章于 2024-08-07 18:21:52 发布

阅读量8.3k

点赞数 6

分类专栏： web前端 ElementUI

本文链接：https://blog.csdn.net/u014054437/article/details/88656801

版权

在Element UI中遇到自定义标签页`el-tab`内的徽标`el-badge`显示异常的问题。虽然徽标数据已获取且正确，但初始时不渲染。通过查看官方文档并调整代码，在数据请求完成后手动触发组件更新解决了这个问题，原因是组件层级过深可能导致子组件未重新渲染。

摘要由CSDN通过智能技术生成

需求：用户在进入这个页面时，能看到标签页（el-tab）上的代办数字标记（el-badge）

问题：el-badge绑定的变量是有数据的，但是界面上就是不渲染。

代码：

<template>
  <el-tabs>
    <el-tab-pane>
      <span slot="label">
        <i class="el-icon-message">人员信息</i>
        <el-badge :value="todo" v-if="todo>0" size="mini" class="item"></el-badge>
      </span>
    </el-tab-pane>
    <el-tab-pane label="用户管理" name="user"></el-tab-pane>
  </el-tabs>
</template>

<script>
  export default {
    data() {
      return {
        todo: 0,
      }
    },
    mounted() {
      //代办数据
      getTodo() {
        this.$http({
          met