Dialog 对话框
在保留当前页面状态的情况下,告知用户并承载相关操作。
Tabs 标签页
分隔内容上有关联但属于不同类别的数据集合。
这两种组件都是项目布局中经常使用到的元素,最近在使用过程中发现有个问题,dialog上添加一个tab,点击关闭的时候页面会卡死,查找了一些资料后得知原因可能是vue版本太低的原因,所以解决方法之一是升级项目的vue版本,其他还查到一些方法,发现并没有什么用。最后我的解决办法是添加v-if。
给tab添加v-if,绑定dialog的visible.sync,代码如下:
<el-dialog
:visible.sync="showFlag"
>
<div>
<el-container class="dialog-content">
<el-main class="energy-dialog-main">
<el-tabs v-model="tabName" @tab-click="changeTab()" v-if="showFlag">
<el-tab-pane label="标签" name="tab" class="tab-div">
<SteamGeneratorEfficiency :steamGeneratorInfo="steamGeneratorInfo" />
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</div>
</el-dialog>