欢迎光临
我们一直在努力

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

需求:用户在进入这个页面时,能看到标签页(el-tab)上的代办数字标记(el-badge)

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

代码:

  <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({
          method: "post",
          url: `...`,
          params: {...}
        }).then(res => {
          console.log("代办数据请求成功", res.data.data.todoNum);
          this.todo = res.data.data.todoNum || 0;
        })
      }, 
    },
    created() {
    }
  }
</script>
复制代码

在 getTodo 里成功打印了:代办数据请求成功 1

然而视图如下:

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

当点击tab标签时,标记出来了:

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

查阅了相关资料,发现 vue 官网上有下面一段话:

示例:
迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

强制更新
如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。
你可能还没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。
然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事。
解决:
复制代码

在getTodo请求到数据之后增加一句:

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

然后打开页面时,标签页上的标记就出现了:

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

原因分析:组件层级嵌套深了有可能会出现子组件不重新渲染的情况(我对这个解释很不满意,后续补上…)

本文来源于互联网:Element 自定义标签页(el-tab) 下的 el-badge 视图不渲染

赞(0)
未经允许不得转载:流量话费活动资讯发布 薅羊毛线报平台-云上的日子 » Element 自定义标签页(el-tab) 下的 el-badge 视图不渲染

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

活动线报-流量话费-编程技巧

联系我们联系我们