在Element UI中,当el-dialog组件设置了append-to-body属性后,该组件的DOM元素会被直接插入到body元素中,而不是插入到它的父元素中。这通常用于解决嵌套el-dialog时可能遇到的层级问题,但它也带来了样式作用域的问题。由于el-dialog被移动到了body下,它不再受组件内部带有scoped属性的<style>标签的约束。
解决的方式, 不要将 dialog 放置于可能新增元素的节点 后面, 另外用例中 将 dialog 放置于循环中 本来也是一个问题 如果appendToBody 配置为false会怎么样? 点击了 dialog 之后, 可以看到对应的 wrapper 的 div 依然还是在原来的 dom 层级上面 然后vue 这时候基于 dialog节点 来添加元素, 可以正常添加到 添加目...
1、当dialog弹窗出现在遮罩层下面时,如这种情况: 2、解决办法就是,加个:append-to-body="true" 属性,效果如下: 。
因此,建议在使用 el-dialog 组件时将其 :append-to-body 属性设置为 true,以确保对话框的正确显示和功能正常。 需要注意的是,在使用:append-to-body="true" 属性时可能会导致一些 CSS 样式失效或者需要重新定义,因此应该进行测试以确保对话框的正确显示和功能正常。 因此,需要额外给这个el-dialog进行css设置。 单...
el-dialog中再嵌套一个el-dialog,第二个弹窗会被遮住。这是因为第二个弹窗没有给定append-to-body属性造成的 正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true,...
属性:visible.sync="dialogVisible"是否显示对话框,.sync修饰符实时更新数据 参数为boolean类型,为true时显示对话框,为false不显示对话框:titel="title"对话框的标题,参数为string类型 width="30%"对话框的宽度:append-to-body="true"对话框自身是否插入到body元素中,(嵌套的对话框该属性必须为true,默认为false):...
在el-dialog中使用拖拽指令后，确保组件正确显示并发挥预期功能，关键在于`:append-to-body`属性的设置。将其设为`true`，使组件直接插入文档的``元素下，避免受到父组件样式和约束的影响，确保对话框正确显示和功能正常。使用`:append-to-body="true"`时，注意可能影响CSS样式的有效性或需要重新定义...
<el-dialog title="新增" :visible="addFormVisible" :close-on-click-modal="false"> 在使用 el-dialog，发现无论怎么做，该对话框也无法显示，前端也没有报错，点击按钮时，发现遮罩层已经出来了，但对话框没有显示，经查缺少属性 append-to-body，将该值设置为 true 即可。<el-dialog class="el-dialog_...
在使用el-dialog,发现无论怎么做,该对话框也无法显示,前端也没有报错. 点击按钮时,发现遮罩层已经出来了,但对话框没有显示. 经查,缺少属性append-to-body,将该值设置为true即可 代码语言:javascript 复制 <!--审批悬浮框--><el-dialogclass="el-dialog__width":title="operationForm.operationName":visible....
增加配置::append-to-body="true" 官方文档写的是:正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层...