element tab组件使用Tabs的label slot不能及时动态更新

Question

elementUI 的bug,tab组件使用Tabs的label slot不能及时动态更新。试过了Vue.set方法，forceUpdate()，都没有效果

源代码：

<el-tabs ref="tabs" v-model="activeName" type="border-card" @tab-click="handleClick">  
 <template v-for="item in tabs">  
     <el-tab-pane :key="item.name"  
     :name="item.name">  
         <span slot="label">{{ item.label }}<el-badge :value="item.count"></el-badge>
         </span>  
         <keep-alive> 
            <component 
                v-if="activeName === item.name"  
                v-bind:is="item.currentComponent"  
                @relatedRiskFuc="relatedRiskFuc"  
            >
            </component>  
         </keep-alive> 
     </el-tab-pane> 
 </template>
 </el-tabs>

在github上也看到这个issue
Tabs的label slot不能及时动态更新 #2934

有没有遇到过这个问题的 ，如何解决的？

Answer 1

已解决
this.$refs.tabs.$refs.nav.$forceUpdate()

relatedRiskFuc(val) {  
  const _this = this  
  for(let i = 0; i< this.tabs.length; i++) {  
    if(this.tabs[i].name === val.name) {  
      _this.$set(_this.tabs[i], 'count', val.tableData.length)  
      _this.$set(_this.tabs[i], 'asset_list', val.tableData)  
    }  
    _this.$set(_this.tabs, i, _this.tabs[i])  
    this.$refs.tabs.$refs.nav.$forceUpdate()  
},