使用el-dialog遇到的坑——append-to-body

最新推荐文章于 2024-06-06 14:18:20 发布
最新推荐文章于 2024-06-06 14:18:20 发布
阅读量3.6w 收藏 25
点赞数 16
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/syx_cainiao/article/details/110196546
版权

场景：一个list展示列表，点击每条列表信息的详情按钮，可以弹出el-dialog弹出框用来展示信息详情。
我要的效果：
在这里插入图片描述
我在给详情页面内容添加el-scrollbar滚动条时，无论怎么该都不出效果，我一度怀疑是我添加代码时添加错了，代码如下：

<el-dialog class="complainInfo" :visible.sync="openView
最低0.47元/天 解锁文章
syx_cainiao
关注
  • 16
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 2555
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在element ui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2 elementUI el-dialog修改了body样式不生效问题解决方案，element组件
44 el-dialog 的 appendToBody 属性, 导致 vue 响应式失效
970655147的专栏
03-26 1707
通常意义上 主要的问题为 列表的某响应式数据更新着更新着 后面就变成非响应式对象了, 然后 就造成了 数据一直在更新, 但是 视图的渲染后面就未渲染了, 这是一个由于 模型上的问题 导致的数据的不在响应式更新。可以看到 mounted 之后的两个操作是正常的, 最终 tuesday 可以看到增加的晚上的计划, wednesday morning 的事项发生了改变。又或者 是因为使用了相关 vue 未能够检测到的 api 来更新 对象, 数组 的元素, 然后导致的数据的不同步, 数据更新了 但是视图未更新。
el-dialog append-to-body=false时遮罩层无法遮盖父级同级组件
最新发布
qq_43615959的博客
06-06 154
解决el-dialog append-to-body=false、modal-append-to-body=false时遮罩层无法遮盖父级同级组件的问题
el-dialog遮罩层的问题
simple_smile1208的博客
08-30 8375
在一个el-dialog中点击再出现一个el-dialog时会出现一个遮罩层的问题 解决方法：添加:append-to-body="true"属性
Element的Dialog组件，嵌套的 Dialog的append-to-body属性（append-to-body属性，导致内层弹框样式设置不上）
热门推荐
ddx2019的博客
07-26 2万+
一、问题描述 append-to-body属性，导致内层弹框样式设置不上 二、解决办法， 自然是 去除 append-to-body 属性,内层弹框样式设置上了，且正常显示
vue+Element中append-to-body的使用
weixin_43626529的博客
10-28 6228
我们写项目的时候经常会遇到子组件被父组件覆盖的情况，这个时候在子组件的dialog上 就应该加上append-to-body属性
append-to-body
weixin_47175934的博客
09-27 141
append-to-body
append-to-body属性导致dialog样式失效
qq_40084554的博客
12-21 2276
append-to-body属性导致dialog样式失效
element ui 对话框el-dialog关闭事件详解
08-27
下面小编就为大家分享一篇element ui 对话框el-dialog关闭事件详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
elementui更改el-dialog关闭按钮的图标d的示例代码
10-15
在Element UI框架中，`el-dialog` 是一个用于创建弹出式对话框的组件，它在用户界面中常用于显示重要信息或者进行确认操作。在某些设计需求下，可能需要自定义`el-dialog`的关闭按钮图标以符合特定的品牌风格或者...
基于element-ui对话框el-dialog初始化的校验问题解决
10-14
在使用Element-UI框架开发前端应用时，遇到的一个常见问题是关于`el-dialog`对话框的初始化校验问题。`el-dialog`是Element-UI提供的一个模态对话框组件，它通常与`el-form`结合使用，用于数据输入和验证。然而，当...
element-ui 组件样式bug，涉及menu，select，dialog，使用append-to-body进行处理。
Robergean的博客
09-27 1556
element-ui 组件样式bug，涉及menu，select，dialog，使用append-to-body进行处理。
el-dialog嵌套遇到的问题
梅花寺
05-25 4753
前言 最近在弄PC端的管理平台，然后使用的是vue + elementUI。今天把遇到的问题总结下，正所谓，好记性不如烂笔头。 el-dialog嵌套 我们的业务需求需要嵌套dialog，正常打开第一个dialog是没有没问题的。 页面有蒙层，然后内容区域高亮 如下图 但是打开嵌套的dialog后蒙层盖住了整个页面，导致内容区域也被盖住了。 然后我去查看文档，查看页面dom结构就知道大致原因了。 这是因为dialog的蒙层默认都是插入到body的，然后它的z-index是动态生成，默认是2000，内容区
elementui-plus el-dialog弹出时body有滚动条，修改了body样式
u014220146的博客
08-30 3230
使用组件el-dialog弹窗，写在二级组件中。
解决办法：Element UI中el-dialog双层嵌套问题，遮罩显示异常处理
lh_seckill的博客
11-26 3356
1.给被嵌套的dialog增加custom-class属性 和append-to-body属性 <el-dialog custom-class="el-dialog-s" append-to-body :visible.sync="dialogVisible"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> 2.自定义样式，覆盖追加append-to-bod...
elementui弹窗Dialog添加append-to-body后修改原样式无效
m0_54570434的博客
06-07 1231
1.文档提供了 这属性。
vue 使用element-ui的el-dialog时 由于滚动条隐藏和出现导致页面抖动问题的解决
m0_48644700的博客
03-16 2159
接手之前老项目 修改为el-scrollbar组件 但是height:100%以及overflow:hidden设置，影响到监听 $(window).scrollTop()值显示回到顶部按钮，并且影响到路由跳转页面跳转时 新页面定位在页面顶部功能，bug更多了，面向百度编程后发现一大神解决方法： 找到”main.js“，入口文件， element ui 已经引入，配置一下，如下值： import ElementUI from ‘element-ui’; ElementUI.Dialog.props.lock
element ui使用滚动条组件el-scrollbar(官方没有)解决对话框el-dialog的滚动条问题
濮家大少
03-12 9082
今天写vue+element ui写项目时有个需求是要在对话框中进行操作，但是当对话框内容过多时却不会出现滚动条，通过修改样式后虽然出现滚动条，但是滚动条的样式不是很理想，通过查找发现了element ui官方没有的隐藏组件el-scrollbar(滚动条组件) <el-scrollbar style="height:300px;">//我在这里设置高度未300px ...... &...
关于element ui select，date-picker添加:popper-append-to-body=“false“后，下拉框下拉方向不会自动调整的问题
weixin_46543056的博客
07-13 2847
关于element ui select，date-picker添加:popper-append-to-body="false"后，下拉框下拉方向不会自动调整的问题
<el-dialog> 组件 append-to-body
07-27
<el-dialog> 组件的 append-to-body 属性的作用是确定对话框是否插入到文档的 <body> 元素中。如果将该属性设置为 true，对话框将被插入到 <body> 元素中，独立于父组件的样式和约束。这样可以确保对话框在任何情况下都能正确显示。\[1\] 如果不使用 append-to-body 属性，或者将其设置为默认值 false，对话框将被插入到父组件的节点下。这意味着对话框的显示可能受到父组件的父元素的样式和约束的影响，可能导致一些显示问题。\[3\] 为了解决这个问题，可以在关闭对话框时直接销毁对话框，使用 v-if 来控制对话框的显示与隐藏。在关闭对话框时，可以重置表单数据并清空表单验证，以确保下次打开对话框时表单是干净的。\[2\] #### 引用[.reference_title] - *1* *3* [el-dialog 组件中 :append-to-body=“true](https://blog.csdn.net/qq_25741071/article/details/130147378)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue element ＜el-dialog＞ 标签 内表单验证坑记录](https://blog.csdn.net/weixin_44534359/article/details/116527748)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值