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

coolpail 发布于2019-08-23 17:59 / 2434人阅读

摘要：当新增和编辑模态框内容一样时这时候就可以共用一个模态框减少代码量具体代码如下新增新增不需要传递任何参数编辑编辑时候需要传递当前行的模态框内容公司名称请输入内容统一信用社码请输入内容公司地址请输入内

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

  新增//新增不需要传递任何参数
  编辑
//编辑时候,需要传递当前行的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);
                }
                );
        }
      }
  });
},

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104460.html

vue+element 模态框是表格形式的可编辑表单

摘要：要实现的效果如下初始化的时候不可编辑点击编辑按钮编辑按钮隐藏取消编辑按钮显示部分输入框变为可编辑营销单详情工单号客户姓名联系电话客户地址营销人员工号要实现的效果如下,初始化的时候,不可编辑,点击编辑按钮,编辑按钮隐藏,取消编辑按钮显示;部分input输入框变为可编辑showImg(https://segmentfault.com/img/bVbtBnR?w=915&h=437); s...

nifhlheimr 2019-08-23 17:59 评论0 收藏0
vue+element后台管理系统中,模态框中有新增模态框和删除功能

摘要：实现效果如下结构操作成员删除获取当前行的打开新增成员确定新增请选择用户添加成功从数组中添加当前行删除员工确定删除吗删除成功从数组中删除当前行实现效果如下showImg(https://segmentfault.com/img/bVbtHZ3?w=1081&h=359); 结构成员删除 ...

testHs 2019-08-23 18:03 评论0 收藏0
vue的生命周期解析并通过表单理解MVVM（不仅理论，图文并茂）

摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。开始前说一说吐槽首先，文章有谬误的地方，请评论，我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...

silvertheo 2019-08-22 14:56 评论0 收藏0
vue+element表格中模态框的使用(解构赋值)

摘要：中定义方法解构赋值使用方法在函数中传入两个数组第一个数组中的每一项一一对应等于第二个数组的每一项例如张三得到张三表格中的内容操作催办中的数据当前操作行模态框控制显示隐藏点击催办按钮调用函数传入两个数组得到让模态框显示并把当前 main.js中定义方法 /**解构赋值 * @param {*} arr1 key * @param {*} arr2 value*/ Vue.pro...

phoenixsky 2019-08-23 18:19 评论0 收藏0