vue中使用模态框传参_vue+element中,新增和编辑共用一个模态框

当新增和编辑模态框内容一样时,这时刻就能够共用一个模态框,削减代码量,详细代码以下

新增

//新增不须要通报任何参数

编辑

//编辑时刻,须要通报当前行的id

模态框内容

取 消

确 定

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

}

);

}

}

});

},