在做后台管理系统的时候肯定会用到添加编辑，正常肯定是写两个弹窗，那这样就会非常麻烦，占用代码资源，可以使用简易方法，就那elment-plus组件库来举例
先看弹窗结构
<el-dialog v-model="table.mode" :title="" width="30%" align-center :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :before-close="close"> <div style="display: flex;justify-content: center;align-items: center;"> </div> <template #footer> <span class="dialog-footer"> <el-button type="primary" @click="yes"> 确定 </el-button> </span> </template> </el-dialog>
这里的title可以写成三元表达式
:title="form.id==''?'新增':'编辑'"
在下面的reactive中定义
const form = reactive({ id:'' })
当关闭的时候就是这个弹出框的:before-close事件
关闭的时候给form.id赋值为空
点击编辑按钮时候给form.id赋值id
最终可以实现一个弹出框做两件事
