el form多層動態表單驗證問題解決

2021-10-22 19:49:31 字數 2634 閱讀 9700

原**結構如下:

"addobject" ref=

"objectform"

:rules=

"add_object_rules"

>

"目標名稱" prop=

"object_name"

>

<

/el-form-item>

"週期範圍" prop=

"objyear"

>

<

/el-form-item>

"負責單位" prop=

"group_ids"

>

<

/el-form-item>

//一層迴圈

for=

"(group, gindex) in addobject.addprogroup"

:key=

"gindex"

>

="add_project_form"

v-for=

"(pro, index) in group.pros"

:key=

"index"

>

//二層迴圈

class

="add_project_form"

v-for=

"(pro, index) in group.pros"

:key=

"index"

>

:prop=

"'pros.' + index + '.project_content'"

:rules=

"add_object_rules.project_content"

label=

"專案內容"

>

//具體驗證項

"pro.project_content"

>

<

/el-input>

<

/el-form-item>

<

/el-form-item>

<

/el-form-item>

<

/div>

<

/el-form>看了官網也查閱了很多資料,都有動態表單驗證的說法,於是我編寫了以上的結構,結果報了這個錯

就是說我prop對不上值,除錯了好久發現結構也對,資料也取到了,十分鬱悶,然後我終於查到了,原來裡面那層還要套乙個el-form…好吧,合理。

修改後**:

"addobject" ref=

"objectform"

:rules=

"add_object_rules"

>

"目標名稱" prop=

"object_name"

>

<

/el-form-item>

"週期範圍" prop=

"objyear"

>

<

/el-form-item>

"負責單位" prop=

"group_ids"

>

<

/el-form-item>

//一層迴圈

for=

"(group, gindex) in addobject.addprogroup"

:key=

"gindex"

>

="add_project_form"

v-for=

"(pro, index) in group.pros"

:key=

"index"

>

//二層迴圈

//---------新增--start-----

"group"

>

//---------新增--end-----

class

="add_project_form"

v-for=

"(pro, index) in group.pros"

:key=

"index"

>

:prop=

"'pros.' + index + '.project_content'"

:rules=

"add_object_rules.project_content"

label=

"專案內容"

>

//具體驗證項

"pro.project_content"

>

<

/el-input>

<

/el-form-item>

<

/el-form-item>

//---------新增--start-----

<

/el-form>

//---------新增--end-----

<

/el-form-item>

<

/div>

<

/el-form>參考文章:

el form表單驗證

如果table在form中,且需要對每個 進行驗證的話,需要對prop進行處理 el form上,model繫結的資料是json物件格式 el form item上,prop繫結的值必須可以通過.的方式從el form上的model繫結的物件中找到 即prop值和el form item中model...

el form單個表單域新增自定義驗證

直接把validator寫在data中會報undefined,我們需要把它改造一下,寫在methods中 下面貼 style width 20px height 20px margin 4px 將validator寫在methods中 methods callback imagevalidator ...

vue element 動態表單驗證

公司最近的專案有個新增動態表單的需求,總結一下我在表單驗證上遇到的一些坑。如圖是功能的需求,這個功能挺好實現的,但是表單驗證真是耗費了我一些功夫。vue element在表單驗證上有一些限制,必須依照element示例的格式才能驗證通過。附上 1 el form model dynamicvalid...