- 项目技术栈: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()
},