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

1,049 阅读1分钟
  • 项目技术栈:vue.js:2.6.10,element-ui:2.7.2
  • 遇到的问题:tab组件使用Tabs的label slot不能及时动态更新。 具体问题:label slot自定义的数字不能根据返回的值动态更新

源代码:

<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 type="primary" :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>

解决方法:

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()  
},