element plus 新增和编辑共用同一个模态框

在使用elementplus的模态框组件，新增信息和编辑信息往往都需要一个模态框，并且二者的内容基本相同，所以可以共用一个模态框，这时就需要设计，模态框的标题和提交按钮，当点击的是新增按钮是，模态框的标题和提交按钮，对应的是新增的逻辑，点击的是编辑按钮时模态框的标题和提交按钮对应是是编辑的逻辑，
具体的前端代码如下：

<!--  开始-->
  <el-dialog
    v-model="dialogFormVisible"
    :title="isEditing ? '修改商品信息' : '添加商品信息'"
    width="500"
  >
    <el-form :model="form">
      <el-form-item label="商品名" :label-width="formLabelWidth">
        <el-input v-model="form.productName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="单价" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="库存" :label-width="formLabelWidth">
        <el-input v-model="form.stock" autocomplete="off" />
      </el-form-item>

const isEditing = ref(false); // 用来跟踪是编辑还是新增状态
这里通过对标题添加一个布尔类型的值，来标记是编辑状态还是新增状态

   <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="isEditing ? edit() : addProduct()">
          {{ isEditing ? "提交编辑" : "提交新增" }}
        </el-button>
      </div>
    </template>
    

这里的提交按钮也是通过isEditing自定义的值来控制，例如当打开新增的弹窗时设置isEditing的值为false ,这样它的标题和提交按钮执行的就是新增商品的那套逻辑。