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

AaronYuan
  • 1.5k

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

源代码:

<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

有没有遇到过这个问题的 ,如何解决的?

回复
阅读 3.3k
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()  
},
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏