场景一:我们将dialog写成一个可复用的公共组件用于显示不同内容(如表格操作中的修改或添加的弹窗),之后发现dialog的遮罩将弹出层(点击修改或添加后理应由一个弹窗显示出来)都盖住了,而我想要的效果是遮罩只遮住旧的窗口,而当前窗口应该完全显示;

(注:表格是使用easyui的panel和window来包裹的,dialog才是使用的element-ui中的组件)

百度了一圈最后的解决方案是在el-dialog上加入以下属性:

:modal-append-to-body="false"

意为:遮罩层是否插入至 body 元素上,若为 false,则遮罩层会插入至 Dialog 的父元素上

场景二: 同一个 项目中,dialog用于密码修改,且不引用上面的公共组件,直接使用<el-dialog></dialog>标签包裹一个form表单。结果表现是这样的:单独点击密码修改打开弹框没问题,但是若先打开一个table-window窗口后再点击密码修改按钮打开弹框,会发现此时的弹框会直接被

table-window遮盖,表面上看似层级不够的原因造成的,但是看了css样式并非如此,或者直接给dialog添加比bable高的层级,一样无济于事。

解决办法如下:在el-dialog上加入以下属性

:append-to-body="true" 
意为:Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true。(官方的解释:到现在我也没整明白这句话的意思!)

博客上看到意为博友的解释是这样的:因为有时候会存在页面某些元素没有被 modal 盖上的情况,其实这种情况出现的原因就是你的dialog 是放在当前组件中的,如果放body 下则不会有这些情况!虽然也是似懂非懂,但是起码问题解决了,这就够了。

element-ui—dialog使用过程中的坑的更多相关文章

  1. Torch-RNN运行过程中的坑 [2](Lua的string sub函数,读取中文失败,乱码?)

    0.踩坑背景 仍然是torch-rnn/LanguageModel.lua文件中的一些问题,仍然是这个狗血的LM:encode_string函数: function LM:encode_string( ...

  2. Torch-RNN运行过程中的坑 [1](读取Lua非空table,size为0)

    0.踩坑背景 执行Torch-RNN的时候,在LanguageModel.lua中的encode_string函数中,对start_text的各个character进行id映射编码,实现功能类似“北京 ...

  3. Torch-RNN运行过程中的坑 [0](一些基础概念)

    0.Lua & LuaJIT简介 Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua 是巴 ...

  4. 菜鸟帮你跳过openstack配置过程中的坑

    一:前言 对于一个以前做java全栈工程师而言,而且没学过Linux,很少用虚拟机(还是在大学的时候简单的用过),去配置openstack我想我入的坑肯定比有基础的一定要多,躺在每个坑中徘徊思索的时间 ...

  5. 菜鸟帮你跳过openstack配置过程中的坑[文末新添加福利]

    一:前言 对于一个以前做java全栈工程师而言,而且没学过Linux,很少用虚拟机(还是在大学的时候简单的用过),去配置openstack我想我入的坑肯定比有基础的一定要多,躺在每个坑中徘徊思索的时间 ...

  6. 学习django3过程中的坑

    最近跟着Django by Example 2015学习,可老想用最新版的Django3.在学的过程中可踩了不少坑. 今天就又碰到一个: 在这本书中96页有这样的代码: url(r'^login/$' ...

  7. Docker从零到实践过程中的坑

    欢迎指正: Centos7 下的ulimit在Docker中的坑 http://www.dockone.io/article/522 僵尸容器:Docker 中的孤儿进程 https://yq.ali ...

  8. Vue发布过程中遇到坑,以及webpack打包优化

    前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...

  9. Ant+Jmeter自动化接口测试的部署 及 部署过程中的坑

    一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html    配置环境变量-系统变 ...

随机推荐

  1. 使用 Docker/LXC 迅速启动一个桌面系统

    使用 Docker/LXC 迅速启动一个桌面系统 Docker 是 dotCloud 最近几个月刚宣布的开源引擎,旨在提供一种应用程序的自动化部署解决方案,简单的说就是,在 Linux 系统上迅速创建 ...

  2. 转载 初探Promise

    初探Promise https://segmentfault.com/a/1190000007032448 javascript es6 promise 33.5k 次阅读  ·  读完需要 65 分 ...

  3. Directx11教程(53) D3D11管线(8) GS的调度执行

    原文:Directx11教程(53) D3D11管线(8) GS的调度执行        在前面的教程中,我们分析了VS-PS的shader管线组合执行过程,本章我们分析一下VS-GS-PS的管线执行 ...

  4. 仿Google Nexus菜单样式

    在线演示 本地下载

  5. 用五种不同的布局方式实现“左右300px中间自适应”的效果

    float浮动 <section class="layout float"> <style media="screen"> .layou ...

  6. 2019-8-30-C#-从零开始写-SharpDx-应用-笔刷

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 笔刷 lindexi 2019-8-30 8:50:0 +0800 2019-6 ...

  7. 洛谷P4126 [AHOI2009]最小割

    题目:洛谷P4126 [AHOI2009]最小割 思路: 结论题 在残余网络上跑tarjan求出所有SCC,记id[u]为点u所在SCC的编号.显然有id[s]!=id[t](否则s到t有通路,能继续 ...

  8. shell学习(16)- 压缩和解压缩命令tar和zip

    tar命令 [root@Linux ~]# tar [-cxtzjvfpPN] 文件与目录 .... 参数: -c :建立一个压缩文件的参数指令(create 的意思): -x :解开一个压缩文件的参 ...

  9. 【C++】STL :栈

    c++stack(堆栈)是一个容器的改编,它实现了一个先进后出的数据结构(FILO) 使用该容器时需要包含#include<stack>头文件: 定义stack对象的示例代码如下: sta ...

  10. 04Top K算法问题

    本章阐述寻找最小的k个数的反面,即寻找最大的k个数,尽管寻找最大的k个树和寻找最小的k个数,本质上是一样的.但这个寻找最大的k个数的问题的实用范围更广,因为它牵扯到了一个Top K算法问题,以及有关搜 ...