后台管理系统添加编辑（vue）

在做后台管理系统的时候肯定会用到添加编辑，正常肯定是写两个弹窗，那这样就会非常麻烦，占用代码资源，可以使用简易方法，就那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

最终可以实现一个弹出框做两件事