问题的原因是因为在dialog关闭时实际的DOM树是没有删除对应的DOM的,这样就可能会导致第一层的元素在使用v-if或v-show时渲染出现问题
<el-dialogtitle="目标详情":visible.sync="dialogVisible"v-if="dialogVisible"width="80%"height="70%":before-close="handleClose"><history-target:editDates="editDates"style=""></history-target></el-dialog>//这样高度70%不生效 应该添加css .el-dialog__body{height:70vh;overflow:auto;}...
没有生效,看了组件库的源码,它是通过绑定key值,然后当key属性变化的时候,vue才会对当前组件重新渲染。 2、使用 v-if : 取值为控制弹窗显示隐藏的值,我们打开弹窗时它就会重新重建,关闭弹窗的话就会销毁。 <el-dialog :visible.sync="openputOut" width="500px" v-if="openputOut"> 注意:以上方法只是我试...
-- 需要注意的是 v-if绑定的dialogVisible每次关闭会让test子组件生命周期重新加载和data数据初始化--><!-- test组件传入的表单数据都需要监听并用另一个变量接收,且不能初始化就触发监听 --><el-dialog:title="'弹窗测试4-' + (dialogType === 'add' ? '新增' : '编辑')":visible.sync="dialogVisib...
Vue自定义指令实现Element-UI输入框的自动聚焦 按照官网的Vue自定义指令directives设置Element-UI的el-input输入框获取焦点无法生效,通过查看浏览器解析出的Element-UI的DOM树发现,Element-UI的input外层包裹了一层<div><div/>标签,浏览器解析如下: 根据DOM结构更改自定义指令代码如下: 如果写 el.f...【...
可自定义弹窗的名称,宽度,是否可见;页面中可在一个dialog中写,内部用v-if控制不同弹窗的显示 <el-dialog:title="dialog.title":visible.sync="dialog.visible":width="dialog.width"append-to-body><divv-if="dialog.title == '查看' || dialog.title == '填写' || dialog.title == '审核'"></div...
vue中el-dialog得高度直接设置百分比不生效 vue中el-dialog得⾼度直接设置百分⽐不⽣效vue中使⽤⼦组件弹框，el-dialog设置百分⽐⾼度不⽣效，应该这样写 <el-dialog title="⽬标详情" :visible.sync="dialogVisible" v-if="dialogVisible" width="80%" height="70%" :before-close="...