element-ui 对话框中嵌套对话框及其遮罩层关闭问题

最新推荐文章于 2024-07-16 09:26:19 发布
最新推荐文章于 2024-07-16 09:26:19 发布
阅读量3.8k 收藏 7
点赞数 4
分类专栏： vue小白炼成记 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chpswg/article/details/108448784
版权

1、经常会遇到对话框中打开对话框，主要是两个对话框均设置  :append-to-body="true"

父组件对话框

父组件中引入子组件

子组件中对话框设置

运行后

 

 

这样即使是多个对话框逐层嵌套都可以。

注意的是，在子组件中千万不能输入  :modal-append-to-body="false"，否则，当子组件关闭时，所有对话框的遮罩层都会被关闭，变成了没有遮罩层，如下图两层对话框关闭子对话框后，父组件的遮罩层同时也被关闭了

下图第三层对话框关闭后，父组件和父组件的父组件的的遮罩层同时也被关闭了

cici_cmh
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
el-dialog 组件中 :append-to-body=“true“
qq_25741071的博客
04-14 5410
正在为您搜索：vue项目、element UI框架、el-dialog组件、:append-to-body属性。属性时可能会导致一些 CSS 样式失效或者需要重新定义，因此应该进行测试以确保对话框的正确显示和功能正常。组件受到父组件的父元素的样式和约束的影响，可能导致一些显示问题。在 Vue 项目中使用 Element UI 框架，组件插入到父组件的节点下，而不是直接插入到文档的。但是，如果不使用该属性，而是将其设置为默认值。，以确保对话框的正确显示和功能正常。需要注意的是，在使用。
dialog弹窗关不掉 vue_elementUI弹窗之坑（dialog的遮罩层在弹出层的上面，子弹窗执行保存（确定）按钮之后还要执行取消按钮，Prop being mutated: "showTre...
weixin_30539747的博客
12-24 3410
本文主要解决elementUI弹窗嵌套中的坑,笔者在给同事解决难听过程看到了三个问题：弹窗套弹窗出现蒙层、弹窗套弹窗，子弹窗执行保存(确定)按钮之后还要执行取消按钮、弹窗自带关闭x按钮报错[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent compone...
element-ui dialog 嵌套
最新发布
qq_37309987的博客
07-16 231
dialog 内部嵌套 dialog，内层的 dialog 层级显示会遮罩在内容的 dialog 内容区域之上，内层 dialog 添加 append-to-body 属性即可，如官方文档：
使用elementDialog 对话框嵌套问题
zgg的博客
06-10 2666
当要在对话框中再打开一次对话框时，会发现新打开的对话框是暗的，这时候要在标签里加入append-to-body就可以了
element-ui 弹窗里面嵌套弹窗，解决第二个弹窗被遮罩层掩盖无法显示的问题
锦瑟年华L的博客
08-28 4556
具体使用就是在第一个弹窗中设置 :modal-append-to-body="false" ，在第二个弹窗中设置 :append-to-body="true"我们可以把两个弹窗平级写在主页面中，并同时给2个弹窗设置 :append-to-body="true"这样就能实现我们想要的效果了。
解决 element ui 弹出组件的遮罩层在弹出层的上面的问题
zhumengzj的博客
07-20 3098
添加 :modal-append-to-body="false"
element-ui嵌套弹框遮罩层解决
骨子里的偏爱
03-07 363
element-ui嵌套弹框遮罩层解决
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
vue实现element-ui对话框可拖拽功能
10-18
主要介绍了vue实现element-ui对话框可拖拽功能，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui.rar element-ui核心库压缩包
12-20
这个“element-ui.rar”压缩包包含了 Element UI 的核心库，是开发人员快速搭建企业级 Web 应用的重要工具。 Element UI 的设计理念是简洁、易用，它的组件设计遵循 Material Design 规范，同时考虑到国内用户的...
用vue+element-ui实现表格里嵌套表格
weixin_43691806的博客
03-21 1万+
静态页面，数据都是写死的 <template> <el-table :data="tableData" style="width: 100%"> <el-table-column type="expand"> <template slot-scope="props"> <el-table ...
使用element-ui中的el-form和el-table嵌套实现表格内容编辑并提交表格表单数据校验(可以对勾选到的表格内容必填校验+勾选框)
LewisRoc的博客
08-23 1万+
表格内有表单项支持编辑、保存时能对复选框勾选的部分表格数据进行表单校验
Vue与elementUI表单嵌套表格实现每一项表单验证
qq_45163356的博客
11-25 2290
前言：有时候表单会要已表格的样式布局，实现表格里每一项表单的验证，其实关键在于表单项设置prop，绑定输入框的model值，这个model值来自于表格的数据返回（scope.row.数据值） 表单prop验证，表格显示，表单嵌套表格实现表格每一项的验证 Prop绑定表单对象中对应的部分，才能用对应的规则。 所以在表单项中验证规则必须要有prop， :prop="'tableData.' + scope.$index + 'date'" 才能使用:rules="alldata.rule.
elementUI弹框嵌套表单，但表单被蒙版遮盖
m0_62404884的博客
05-03 757
我的问题是：点击按钮，弹出表单，但是表单被蒙版遮盖 通过网上查找资料发现dialog下面有两个属性 添加 :append-to-body="true"
基于elementUI的Vue 中 el-form 嵌套 el-table的写法
热门推荐
大橙子的专栏
01-11 1万+
前端页面： 前端vue代码： &lt;el-form :model="ruleForm" :rules="rules" ref="ruleForm"&gt; &lt;el-table :data="ruleForm.evidenceTemplateList" stripe border style="width: 100%" size="mini&quo
elementui两层弹窗遮罩问题
qq_39187822的博客
03-11 1556
elementui两层弹窗遮罩问题 问题原因： 1.没有加modal-append-to-body 跟 append-to-body属性. 2.内层dialog没有真正关闭 解决方法： 1.内层在el-dialog加append-to-body 2.外层在el-dialog加:modal-append-to-body=“false”
Element-ui中 表单（Form）校验的几种形式 及 表单嵌套表格含上传（Upload）组件的综合案例
明天也要努力的博客
10-20 1650
基础姿势/自定义姿势 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="年龄
Element UI
哈
07-06 1004
示例二： 表格 示例：表格及作用域插槽 效果： 示例：表单及自定义验证规则
ELEMENT UI 弹窗右上角关闭按钮失效的处理方法
weixin_52066534的博客
09-26 6828
在开发过程中，会经常把添加和编辑的弹窗写在一起，减少代码量，这样有时会出现弹窗右上角关闭按钮失效，点击以后弹窗没有关闭，如下图所示： 点击取消就是没问题的，只有右上角的关闭按钮失效，这时可以用官方文档提供的“before-close”来解决这个问题 这是官方文档，进去就能看到详细说明：https://element.eleme.cn/#/zh-CN/component/dialog 来看看怎么用吧 <el-dialog :visible.sync="editForm.di
element-ui 对话框
04-03
Element UI对话框是一个用于显示弹出窗口的组件，可以在弹出窗口中显示自定义内容，包括文本、图像、表单、列表等。对话框组件具有以下特点： 1. 可以自定义对话框的标题、内容、按钮等； 2. 支持多种对话框类型，...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值