在Element UI中,当el-dialog组件设置了append-to-body属性后,该组件的DOM元素会被直接插入到body元素中,而不是插入到它的父元素中。这通常用于解决嵌套el-dialog时可能遇到的层级问题,但它也带来了样式作用域的问题。由于el-dialog被移动到了body下,它不再受组件内部带有scoped属性的<style>标签的约束。
引起这里的问题, 主要的原因是 dom 结构变化了, 但是 vnode 的结构却没有发生变化 进而导致 vue 这边根据 vnode 的结构渲染新的元素的时候, 出现异常 解决的方式, 不要将 dialog 放置于可能新增元素的节点 后面, 另外用例中 将 dialog 放置于循环中 本来也是一个问题 如果appendToBody 配置为false会怎么样? 点...
1、当dialog弹窗出现在遮罩层下面时,如这种情况: 2、解决办法就是,加个:append-to-body="true" 属性,效果如下: 。
</el-dialog> ``` 5. append-to-body属性 append-to-body属性用于控制对话框是否插入到body元素中,若设置为true,则对话框将插入到body元素中进行渲染,反之则插入到el-dialog组件所在的父级元素中。 ``` <el-dialog :visible.sync="dialogVisible" :append-to-body="true"> 对话框内容 </el-dialog> ``...
<template><divclass="app-container"><el-dialogappend-to-body:close-on-click-modal="false":before-close="crud.cancelCU":visible.sync="crud.status.cu > 0":title="crud.isDanger == 'Plotting' ? '危险源标绘' : crud.status.title":width="crud.isDanger == 'Plotting' ? '1200px' : '500...
element-ui框架的el-dialog弹出框被遮罩层挡住了 如图: 解决方法: 在el-dialog标签里添加 :modal-append-to-body='false’ 实现效果: 问题解析: 先来看看element-ui官网提供的属性说明文档 ** 文档解释:翻译成大白话就是,若el-dialog弹出框设置了modal-append-to-body=‘true’(默认)属性,它的遮罩层就会被...
:modal-append-to-body='false'// 二者都可以,按照各自需求使用就好啦~~:append-to-body='true' 因为我的弹窗单独加样式了所以需要弹窗父元素的类名 <!-- 下架弹窗 --><divclass="deletePopup"><el-dialogtitle="":visible.sync="deleteDialogVisible"width="40%":before-close="handleClose":modal-append...
比如body有一个样式,干扰到具体某个组件内的元素。可局部scoped修改该元素父级的样式即可,不必在当前组件修改body属性。 且如果是某个子组件的样式被body上的样式干扰,scoped还改不了组件外的元素属性。 四:对组件外样式的修改 上次遇到一个业务场景,在子组件中调用elementUI的Dialog对话框。该对话框弹出框后,对话...
element-ui的el-dialog对话框被遮罩层挡住了解决:在el-dialog标签里添加 **:modal-append-to-body=‘false’**就可以了 文档:https://element.eleme.cn/#/zh-CN/component/dialog vue编辑、新增弹框(引用外部页面) 1、准备两个页面一个是表格页面,一个是表单页面2、表格页面中配置 编辑按钮: 引入表单页面:...