vue3.0能用el-dialog吗

Posted 2023-03-23

1.首先在vue的 .vue文件中加入 dialog模板<el-dialog title="科室管理员新增" :visible.sync="dialogFormVisible"></el-dialog>
2.在dialog的模板中加入 div以及样式表，显示你所需要显示的内容和样式。
3.一般如果显示dialog都是在需要的时候在显示出来，完成的时候隐藏起来，那么就需要设置dialog的可见性，加载的时候设置为 不可见即可，在data()
return中添加
4.如果需要dialog显示出来，需要一个触发事件，我们来设置一个按钮，点击的时候出发onclick时间
5.点击增加时候时候出发onclick时间中的handleCreate方法，在methods中添加handleCreate()来显示dialog，this.dialogFormVisible = true;主要是把dialog可见性修改为可见
6.在dialog修改完之后需要隐藏，这就需要触发另外一个click事件，比如设置的dialog为添加事件，添加时候出发
@click="createData"，当返回的数据显示更新完成才能隐藏
7.也可以不触发事件而是直接取消该操作就直接隐藏掉dialog即可
<el-button @click="dialogFormVisible = false">取消</el-button> 参考技术A 1.首先在vue的 .vue文件中加入 dialog模板<el-dialog title="科室管理员新增" :visible.sync="dialogFormVisible"></el-dialog>
2.在dialog的模板中加入 div以及样式表，显示你所需要显示的内容和样式。
3.一般如果显示dialog都是在需要的时候在显示出来，完成的时候隐藏起来，那么就需要设置dialog的可见性，加载的时候设置为 不可见即可，在data()
return中添加
4.如果需要dialog显示出来，需要一个触发事件，我们来设置一个按钮，点击的时候出发onclick时间
5.点击增加时候时候出发onclick时间中的handleCreate方法，在methods中添加handleCreate()来显示dialog，this.dialogFormVisible = true;主要是把dialog可见性修改为可见
6.在dialog修改完之后需要隐藏，这就需要触发另外一个click事件，比如设置的dialog为添加事件，添加时候出发
@click="createData"，当返回的数据显示更新完成才能隐藏
7.也可以不触发事件而是直接取消该操作就直接隐藏掉dialog即可
<el-button @click="dialogFormVisible = false">取消</el-button> 参考技术B 1.首先在vue的 .vue文件中加入 dialog模板<el-dialog title="科室管理员新增" :visible.sync="dialogFormVisible"></el-dialog>
2.在dialog的模板中加入 div以及样式表，显示你所需要显示的内容和样式。
3.一般如果显示dialog都是在需要的时候在显示出来，完成的时候隐藏起来，那么就需要设置dialog的可见性，加载的时候设置为 不可见即可，在data()
return中添加
4.如果需要dialog显示出来，需要一个触发事件，我们来设置一个按钮，点击的时候出发onclick时间
5.点击增加时候时候出发onclick时间中的handleCreate方法，在methods中添加handleCreate()来显示dialog，this.dialogFormVisible = true;主要是把dialog可见性修改为可见
6.在dialog修改完之后需要隐藏，这就需要触发另外一个click事件，比如设置的dialog为添加事件，添加时候出发
@click="createData"，当返回的数据显示更新完成才能隐藏
7.也可以不触发事件而是直接取消该操作就直接隐藏掉dialog即可
<el-button @click="dialogFormVisible = false">取消</el-button> 参考技术C 1.首先在vue的 .vue文件中加入 dialog模板<el-dialog title="科室管理员新增" :visible.sync="dialogFormVisible"></el-dialog>
2.在dialog的模板中加入 div以及样式表，显示你所需要显示的内容和样式。
3.一般如果显示dialog都是在需要的时候在显示出来，完成的时候隐藏起来，那么就需要设置dialog的可见性，加载的时候设置为 不可见即可，在data()
return中添加
4.如果需要dialog显示出来，需要一个触发事件，我们来设置一个按钮，点击的时候出发onclick时间
5.点击增加时候时候出发onclick时间中的handleCreate方法，在methods中添加handleCreate()来显示dialog，this.dialogFormVisible = true;主要是把dialog可见性修改为可见
6.在dialog修改完之后需要隐藏，这就需要触发另外一个click事件，比如设置的dialog为添加事件，添加时候出发
@click="createData"，当返回的数据显示更新完成才能隐藏
7.也可以不触发事件而是直接取消该操作就直接隐藏掉dialog即可
<el-button @click="dialogFormVisible = false">取消</el-button> 参考技术D 1.首先在vue的 .vue文件中加入 dialog模板<el-dialog title="科室管理员新增" :visible.sync="dialogFormVisible"></el-dialog>
2.在dialog的模板中加入 div以及样式表，显示你所需要显示的内容和样式。
3.一般如果显示dialog都是在需要的时候在显示出来，完成的时候隐藏起来，那么就需要设置dialog的可见性，加载的时候设置为 不可见即可，在data()
return中添加
4.如果需要dialog显示出来，需要一个触发事件，我们来设置一个按钮，点击的时候出发onclick时间
5.点击增加时候时候出发onclick时间中的handleCreate方法，在methods中添加handleCreate()来显示dialog，this.dialogFormVisible = true;主要是把dialog可见性修改为可见
6.在dialog修改完之后需要隐藏，这就需要触发另外一个click事件，比如设置的dialog为添加事件，添加时候出发
@click="createData"，当返回的数据显示更新完成才能隐藏
7.也可以不触发事件而是直接取消该操作就直接隐藏掉dialog即可
<el-button @click="dialogFormVisible = false">取消</el-button>

Vue——每次弹出el-dialog，都会执行mounted

参考技术A 在Vue开发中，有时需要我在同一个页面或列表中，多次加载同一个组件，但问题来了。（例如使用：新增、编辑、详情，使用弹框组件时）
该组件只在页面加载中，加载一次，后面不会再加载了，如el-dialog,解决办法如下，在el-dialog外再加一层div.

div中以v-if来控制组件el-dialog的出现与否,每次弹出el-dialog，都会执行mounted,而不加div,只会执行一次。