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

2024年4月9日 905次阅读 来源: 冬瓜先生

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

  <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);
                }
                );
        }
      }
  });
},
    原文作者：冬瓜先生
    原文地址: https://segmentfault.com/a/1190000019408154
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞