element-ui中弹框dialog不显示

待我称王封你为后i 2023-10-07 09:29 19阅读 0赞

## 一、问题描述 ##

今天在写vue项目时候，  
遇见如下需求：点击编辑按钮弹出一个dialog,dialog中的表单展示当前行显示数据，然后编辑后保存。  
但是我点击后，出现了遮罩层，但是dialog怎么也不显示，如图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70]

## 二、解决方案 ##

这里是由于一个属性没有设置正确导致的问题。在el-dialog 标签内，添加如图红色矩形框内所示属性。  
即可解决问题。  
写法上：  
可以直接写 **append-to-body**  
也可以写成 **:append-to-body=“true”**  
我更喜欢第一种，因为看起来更简洁。顺便补充第二种不要忘了加冒号。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70 1]  
**正确效果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70 2]

## 三、文档说明 ##

我们可以在element ui的官方文档中，找到如下说明。  
[=>文档链接][Link 1]  
![在这里插入图片描述][20200214203406815.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020021420264168.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200214235923802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200214205107387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzc4NTk3,size_16,color_FFFFFF,t_70
[Link 1]: https://element.eleme.io/#/zh-CN/component/dialog
[20200214203406815.png]: https://img-blog.csdnimg.cn/20200214203406815.png