vueelement中新增和编辑共用一个模态框

当新增和编辑模态框内容一样时, 这时候就可以共用一个模态框, 减少代码量, 具体代码如下

  <div class="divBtn" @click="addGsForm"> 新增 </div>// 新增不需要传递任何参数
  <div class="caozuoBtn" @click="bjGsForm(scope.row)"> 编辑 </div>// 编辑时候, 需要传递当前行的 id

模态框内容

  <el-dialog :title="title" class="dialogAdd" width="600px"  :visible.sync="dialogAddgsVisible"  @close="closeDialogAddgsVisible">
  <el-form :model="addForm" :rules="addFormRules" ref="addForm" style="margin-right: 20px;" label-position="right" label-width="110px">
     <el-form-item label="公司名称:"  prop="name">
      <el-input   placeholder="请输入内容" v-model="addForm.name"></el-input>
    </el-form-item>
     <el-form-item label="统一信用社码:" prop="creditCode" >
      <el-input   placeholder="请输入内容" v-model="addForm.creditCode"></el-input>
    </el-form-item>
     <el-form-item label="公司地址:" prop="address" >
      <el-input   placeholder="请输入内容" v-model="addForm.address"></el-input>
    </el-form-item>
     <el-form-item label="电话:" prop="tel" >
      <el-input   placeholder="请输入内容" v-model="addForm.tel"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button size="mini" @click="dialogAddgsVisible = false"> 取 消 </el-button>
    <el-button size="mini" type="primary" @click="saveAddForm"> 确 定 </el-button>
  </div>
</el-dialog>

data 中的数据

 addForm:{
     name:"",
     creditCode:"",
     address:"",
     tel:"",
     id:""
    },
dialogAddgsVisible:false,
title:''

点击新增弹框按钮, 改变模态框的 title

 addGsForm(){
     this.dialogAddgsVisible = true;
     this.title="新增"
},

点击编辑模态框, 改变模态框 title, 并且把当前行的数据赋值给模态框的 input 输入框

  bjGsForm(val){console.log(val)
        this.dialogAddgsVisible = true;
        this.title="编辑"

        this.addForm.name=val.name
        this.addForm.creditCode=val.creditCode
        this.addForm.address=val.address
        this.addForm.tel=val.tel
        this.addForm.id=val.id 
   },

关闭或取消弹框

 closeDialogAddgsVisible(){this.$refs.addForm.resetFields();//element 封装的方法, 清空模态框的值
  this.title="" // 初始化 title 的值
  this.addForm={// 初始化 addForm 中的值
      name:"",
      creditCode:"",
      address:"",
      tel:"",
      id:""   
  }
},

点击确定按钮 (确定添加或编辑)

 saveAddForm() {
    this.$refs.addForm.validate(valid => {if (valid) {
        let params = {
            id: this.addForm.id,
            name: this.addForm.name,
            creditCode: this.addForm.creditCode,
            address: this.addForm.address,
            tel:this.addForm.tel,
        };
        if(!this.addForm.id){// 当没有传过来 id 的时候, 说明是添加, 所以发送添加请求
               this.$post(
              "/api/company/admin/saveCompany",
              params,
              data => {// console.log(data, 1122);
                  this.$message.success("新增企业成功！")
                  this.dialogAddgsVisible = false
                  this.handleCurrentChange(1);
              }
        );
        }else{// 发送编辑请求
               this.$post(
                "/api/company/admin/updateCompany",
                params,
                data => {// console.log(data, 1122);
                    this.$message.success("修改企业成功！")
                    this.dialogAddgsVisible = false
                    this.handleCurrentChange(1);
                }
                );
        }
      }
  });
},