elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决

简介: elementui的el-dialog组件与el-tabs同时用导致浏览器卡死的原因解决

文章目录

在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前端开发工程师!

相关文章
|
6月前
|
测试技术
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
【sgUploadTileImage】自定义组件:浏览器端生成瓦片图,并转换为File文件序列上传瓦片图
|
4月前
|
JavaScript
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
vue 组件封装 | 随鼠标移动的信息框 (含监听鼠标移动、移出事件,获取元素的宽高、获取浏览器的宽高)
48 1
|
移动开发
华为Mate60钉钉App内置浏览器中使用“@kangc/v-md-editor"组件,功能不正常
华为Mate60钉钉App内置浏览器中使用“@kangc/v-md-editor"组件,功能不正常
188 1
|
Web App开发 iOS开发
element-plus:Message 消息提示组件safari浏览器中显示异常
element-plus:Message 消息提示组件safari浏览器中显示异常
208 0
element-plus:Message 消息提示组件safari浏览器中显示异常
|
开发框架 安全 .NET
您是否存在想在浏览器动态编译razor的组件的想法?
您是否存在想在浏览器动态编译razor的组件的想法?
102 1
您是否存在想在浏览器动态编译razor的组件的想法?
|
缓存 前端开发 JavaScript
为组件添加Expires头,最大化利用浏览器缓存
为组件添加Expires头,最大化利用浏览器缓存
134 0
为组件添加Expires头,最大化利用浏览器缓存
|
前端开发 JavaScript 缓存
为组件添加Expires头,最大化利用浏览器缓存
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/51605232 web项目一旦部署完毕,项目中的图片、CSS以及JS基本上很少发生变动,那么假如把这些组件缓存在浏览器客户端,而不再从服务器上获取,那么网站的访问者在首次访问网站后,后续的请求将会大量减轻服务器的请求压力。
1003 0
|
16天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式