vue+element中,新增和編輯共用一個模態框

當新增和編輯模態框內容同樣時,這時候就能夠共用一個模態框,減小代碼量,具體代碼以下

<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);
                }
                );
        }
      }
  });
},