1. 程式人生 > >解決elementUI表單資料新增和修改資料混亂

解決elementUI表單資料新增和修改資料混亂

需求是:初期化一個table列表,可以對table列表資料進行新增和修改,點選新增和修改時彈出窗體,窗體繫結的資料是form裡的Model,開始的時候點選新增是可以的,後臺獲取前臺的資料是沒有id主鍵的,但是當點選修改的時候,因為把主鍵id賦值給了form表單,導致點選新增後form表單和點選修改時的資料相同了

下面是正常的操作

1:初期化


2:點選新增


3:點選修改


下面是沒解決問題前的操作

如果你先點了修改,再點選新增是下面這個介面,這個介面預設就載入了資料,而這種是不對的,應該預設為空,就算可以滿足你的要求,但是由於修改的時候傳入了id主鍵,這時候你本想新增的,到了後臺後就會變成修改了


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表單初始化成了一個空字串,後期是沒辦法新增表單裡其他值的