解决办法
1.绑定@tab-click="handleClick" 事件,通过点击到对应的页签,调用ref里面的显示隐藏,通过v-if实现。具体代码
html
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="基本信息" name="first">
</el-tab-pane>
<el-tab-pane label="经营信息" name="second">
<business @openvisible="openvisible" ref="business"
:clientInfo="clientInfo"></business>
</el-tab-pane>
<el-tab-pane label="企业动态" name="third">
</el-tab-pane>
<el-tab-pane label="服务信息" name="fourth">
</el-tab-pane>
</el-tabs>
method
通过修改定义的隐藏展示实现无感刷新图例
handleClick(tab, event) {
switch (parseInt(tab.index)) {
case 1:
this.$refs.business.showzxt = !this.$refs.business.showzxt
this.$nextTick(() => {
this.$refs.business.showzxt = !this.$refs.business.showzxt
})
break
}
},
组件内部变量
data里定义 showzxt: true
<!-- 企业年报表格 -->
<div class="yearNews-tablezx" v-if="showzxt">
<div class="yearNews-tablezx-zxt"><zxtone></zxtone></div>
<div class="yearNews-tablezx-zxt"><zxttwo></zxttwo></div>
<div class="yearNews-tablezx-zxt"><zxtthree></zxtthree></div>
</div>