一、HTML部分代码

  <!-- 新增编辑弹框  -->
    <el-dialog
      :title="titleMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      :append-to-body="showFlag"
      width="350px"
      height="400px"
      @close="addDialogClosed"
    >
      <!-- 表单区域 -->
      <el-form ref="addFormRef" :model="formData">
        <el-form-item label="日    期：" prop="addDate">
          <el-date-picker
            v-model="formData.addDate"
            type="date"
            style="width: 200px"
            size="mini"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="品    名：" prop="productName">
          <el-input
            v-model="formData.productName"
            size="mini"
            style="width: 200px"
            >></el-input
          >
        </el-form-item>
        <el-form-item label="单    位：" prop="unit">
          <el-input v-model="formData.unit" size="mini" style="width: 200px"
            >></el-input
          >
        </el-form-item>
        <el-form-item label="数    量：" prop="quantity">
          <el-input v-model="formData.quantity" size="mini" style="width: 200px"
            >></el-input
          >
        </el-form-item>
        <el-form-item label="单    价：" prop="unitPrice">
          <el-input
            v-model="formData.unitPrice"
            size="mini"
            style="width: 200px"
            >></el-input
          >
        </el-form-item>
        <el-form-item label="金    额：" prop="amount">
          <el-input v-model="formData.amount" size="mini" style="width: 200px"
            >></el-input
          >
        </el-form-item>
        <el-form-item label="区    域：" prop="useArea">
          <el-input v-model="formData.useArea" size="mini" style="width: 200px"
            >></el-input
          >
        </el-form-item>
        <el-form-item label="备    注：" prop="remark">
          <el-input v-model="formData.remark" size="mini" style="width: 200px"
            >></el-input
          >
        </el-form-item>
      </el-form>

      <!-- 底部区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit()">确 定</el-button>
      </div>
    </el-dialog>

 二、data数据部分

 //新增或编辑表单中的数据
      formData: {
        addDate: "",
        productName: "",
        unit: "",
        quantity: "",
        unitPrice: "",
        amount: "",
        useArea: "",
        remark: "",
      },
      //新增和编辑弹框标题
      dialogFormVisible: false,
      showFlag: true,
      //新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
      titleMap: {
        addEquipment: "新增食材信息",
        editEquipment: "修改食材信息",
      },
     dialogStatus: "", //新增或者编辑框标题

三、methods方法部分

             //弹窗关闭 刷新数据
                addDialogClosed() {
                  this.dialogFormVisible = false;
                  this.formData = [];
                  this.getList();
                },
                //新增按钮
                handleAdd() {
                  //显示弹框
                  this.dialogFormVisible = true;
                  //新增弹框标题
                  this.dialogStatus = "addEquipment";
                },
                //编辑按钮
                handelEdit() {
                  //显示弹框
                  this.dialogFormVisible = true;
                  //编辑弹框标题
                  this.dialogStatus = "editEquipment";
                },
                //确认按钮提交数据
                onSubmit() {
                  if (
                    this.formData.data == "" ||
                    this.formData.productName == "" ||
                    this.formData.unit == "" ||
                    this.formData.quantity == "" ||
                    this.formData.unitPrice == "" ||
                    this.formData.amount == "" ||
                    this.formData.useArea == ""
                  ) {
                    this.$message({
                      message: "请先将食材明细单填写完整，再进行提交！",
                    });
                  } else {
                    this.formData.addDate = moment(this.formData.addDate).format(
                      "YYYY-MM-DD"
                    );
                    addFoodList(this.formData).then((response) => {
                      if (response == "true") {
                        this.$message({
                          message: "保存成功",
                          type: "success",
                          duration: 1000,
                        });
                      } else {
                        this.$message({
                          message: "提交失败，请重新提交！",
                          type: "warning",
                        });
                      }
                    });
                    console.log("你是个憨憨！");
                    //  this.dialogFormVisible = false;
                  }
                },