解决elementUI表单数据新增和修改数据混乱

时间:2021-12-24 07:27:09

需求是:初期化一个table列表,可以对table列表数据进行新增和修改,点击新增和修改时弹出窗体,窗体绑定的数据是form里的Model,开始的时候点击新增是可以的,后台获取前台的数据是没有id主键的,但是当点击修改的时候,因为把主键id赋值给了form表单,导致点击新增后form表单和点击修改时的数据相同了

下面是正常的操作

1:初期化

解决elementUI表单数据新增和修改数据混乱

2:点击新增

解决elementUI表单数据新增和修改数据混乱

3:点击修改

解决elementUI表单数据新增和修改数据混乱

下面是没解决问题前的操作

如果你先点了修改,再点击新增是下面这个界面,这个界面默认就加载了数据,而这种是不对的,应该默认为空,就算可以满足你的要求,但是由于修改的时候传入了id主键,这时候你本想新增的,到了后台后就会变成修改了

解决elementUI表单数据新增和修改数据混乱



Vue数据:

var goodsVue=new Vue({

el:'#goodsVue',

data:{

     form:{ }


Vue方法:

 handleClick:function(row,mark) {
        debugger;
    this.dialogVisible=true;
        if(typeof(row)!="undefined"){
            this.sid=row.sid;
            if(mark==1){
                this.flag=true;
                this.dialogTitle="查看信息";
            }else{
            this.flag=false;
                this.dialogTitle="编辑信息";
            }
            this.form=JSON.parse(JSON.stringify(row)); //开始由于这个地方的原因,导致新增后表单也有数据,而我想要的                                                                                                是空值,解决办法新增时加上这句话 this.form={}
        }else{
        this.form={};//不要用这种  this.form='';
        this.dialogTitle='新增商品';
        }
       

          }

------------------------------------分割线------------------------------------------------------------------

!!解决办法:新增时加上这句话 this.form={}


 this.form={}这个的意思是把表单初始化为一个空对象,后期可以往这个对象里赋值

 this.form=' ' 这个的意思是把form表单初始化成了一个空字符串,后期是没办法添加表单里其他值的