element组件弹窗对话框

偏执的太偏执、 2024-04-17 22:53 55阅读 0赞

## element组件弹窗对话框 ##

先设置按钮点击事件实现弹窗对话框显隐，并传入表单数据row供布局使用。  
![在这里插入图片描述][20190902161215787.png]  
然后用el-dialog组件设计弹窗的内容，可用\{ \{scope.row.cpmc\}\}获取表单cpmc属性的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]  
先在data中设置变量dialogFormVisibleSoldout: false,隐藏对话框。通过改变这个变量的true/false来实现显隐。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]  
对话框的按钮绑定事件，目前只做了显隐，需要数据提交另外补充哈。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]

[20190902161215787.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/f4ab8c1733694c5b9139d415cb44402f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/605c149e4ad64767b9570780bbf02cda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3e2989a67d3843bc872d64757c0fd7ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc3MDM3Nw_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4ba782d464f34efc89f51a83c333e4f3.png