文章目录
在el-dialog弹出框中,如果使用el-tabs,点击弹框的关闭按钮时,会导致弹出框无法关闭,且浏览器卡死。
环境是:
vue :2.6.10 elementui:2.15.3
解决方式:
在el-talbs
的面板中不放任何内容:
<el-tab-pane label="贷款合同" name="0">内容</el-tab-pane> 改为: <el-tab-pane label="贷款合同" name="0"> </el-tab-pane>
将内容放在el-tabs外面,然后用v-show来控制对应的内容的显示。如下图:
<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="贷款合同" name="0"> </el-tab-pane> <el-tab-pane label="放款凭证" name="1"> </el-tab-pane> <el-tab-pane label="采购订单" name="2" :disabled="true"> </el-tab-pane> <el-tab-pane label="订单发票" name="3" :disabled="true"> </el-tab-pane> </el-tabs> <div v-show="activeName == 0"> 面板1的内容 </div> <div v-show="activeName == 1"> 面板2的内容 </div>
至此,问题解决。
最开始以为是el-form不能嵌套el-tabs,其实不是。
如果你在web前端开发、面试、前端学习路线有困难可以加我V:imqdcnn。免费答疑,行业深潜多年的技术牛人帮你解决bug。
祝你能成为一名优秀的WEB前端开发工程师!