H5W3
当前位置:H5W3 > 其他技术问题 > 正文

element el-tab使用自定义标签页加入el-badge时无法更新数值

代码如下,点击按钮增加数值时bage里的数值不会改变,必须点击tab才会更新,请问如何实现点击增加即更新


<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.5.4/lib/index.js"></script>
<div id="app">
<template>
<el-button @click="q">+</el-button>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="first"><span slot="label" style="position: relative;">
          用户管理
          <el-badge :value="aa" class="badge-a"/>
        </span></el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
  </el-tabs>
</template>
</div>

var Main = {
    data() {
      return {
             aa:0,
        activeName: 'second'
      };
    },
    methods: {
    q() {
    this.aa++
    },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

下面是实列地址
https://jsfiddle.net/k17ovgt9/

回答:

组件嵌套的太深有可能会有这个情况 试下 this.$forceUpdate()

回答:

可以在el-tab-pane上绑一个key,每次badge的value变化的时候,key的值也变化,就可以重新刷新一次组件。
Demo:https://codepen.io/anon/pen/g…

回答:

this.$children[0].$children[0].$forceUpdate(),就是找到el-tabs下的整个头部标签元素强制刷新就好了

回答:

只需找到el-badge 的父组件的dom节点使用$forceUpdate()方法即可实现

本文地址:H5W3 » element el-tab使用自定义标签页加入el-badge时无法更新数值

评论 0

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