vue 表單提交

 在vue中，有一個$el 屬性。

該屬性在created 的階段還是不可用的，直到 mounted 之后，我們才能獲取到 $el 屬性。

$el是vue實例中 el 屬性標識的dom元素。

 

————————————————————————————————————

vue表單提交，有時候需要提交 文件數據，這時候需要用到 formDate，代碼如下

　　　　　　　　　　　　let formData = new FormData($(this.$el).find(".import-form")[0]);     // .import-form 是需要提交的表單
                    let config = { processData : false, contentType : false, disableDefaultAlert: true};
                    
                    App.ajax(batchImport, 'post', formData, config).done(ret=>{
                        App.showAlert({type:"success",
                            content:"上傳成功！",
                            title:"提示"}); 
 8
 9                         this.render();  // 數據提交成功之后，重新調用渲染頁面的方法更新頁面數據。
                    }).fail(msg=>{
                        App.showAlert({type:"error",
                            content:msg,
                            title:"導入失敗！"});
                        close();
                    })

 

 還有一種提交方式，沒有文本，只需要提交表單數據的方法。

serialize()  方法可以序列化表單數據。

　　　　　　　　loadData(formEle){
                let formData = $(formEle).serialize();
                App.showLoading();
                App.ajax(ActivityList, 'get', formData).done(ret=>{
                    this.dataList = ret.data;
                    this.list = ret.data.activityList || [];
                    if(ret.data.activityList==null){
                        App.showAlert({type:"info",
                                       content:"該查詢條件下沒有查詢到數據",
                                       title:"提示"});
                    }
                    this.pagination.total = ret.data.pageCount;
                })
                .always(()=>{
                    App.hideLoading();
                });
            },

 

或者也可以通過$el 屬性獲取表單，進行序列化

                let formData = $(this.$el).find('.js-query-form').serialize();