element ui 動態新增的表單元素驗證

2021-09-29 13:46:51 字數 1109 閱讀 2747

v-


for=


"(item, index) in maintenanceform.doctypelist"


:key=


"index"


:label=


"$i18n.locale === 'zh-cn' ? item.doctypecname : item.doctypeename"


required


class


="d2-mb-0"


>


class


="d2-mr-0"


:prop=


"'doctypelist.' + index + '.strval'"


:rules=


"`, trigger: 'blur' }"


>


="form-item-contain"


>


v-model=


"item.strval"


:placeholder=


"`請輸入$編碼`"


class


="d2-mr"


style=


"width: 178px"


@input=


"change($event, index)"


>


<


/el-input>


<


/div>


<


/el-form-item>


<


/el-form-item>
element ui 使用 v-for 生成的表單元素,一開始不太清楚是怎麼做驗證,後查詢資料發現是用如下方法,主要注意一下兩個屬性:

:prop=


"'doctypelist.' + index + '.strval'"


:rules=


"`, trigger: 'blur' }"
prop 需要繫結, 繫結規則為 v-for 迴圈的陣列 『doctypelist.』 (『注意在陣列後面要加點 .』) + index (陣列下標) + 『.strval』 (當前需要做驗證的輸入框)

可以通過列印 this.$refs[『form名稱』].fields 檢視每個元件的 prop

element ui中動態新增的表單進行驗證

專案中有一項表單是需要動態新增的，但是動態新增的表單，驗證規則也需要動態新增。官網中的例子 如下 注意事項在 中紅色注釋 這裡的model一定要用 model 形式 而不是 v model item prop email label 郵箱 rules item v for domain,index ...

element ui動態換膚

通過在elementui的框架基礎上使用colorpicker顏色選擇器進行動態換膚，多餘的話就不說了下述 能夠直接使用。動態換膚效果圖 展示詳情 el button dark content placement bottom v model theme class theme picker siz...

elementui 動態表頭

最近，在用elementui做乙個動態表頭的功能，把自己開發的流程大概分享一下。首先，我們得了解這個option的作用 這個 option屬性就是繫結我們列表 的模板。通過引入我們寫好的js檔案來構成乙個 這個js檔案我也貼一部分 出來介紹一下 可以看出來，這個column就是我們的列陣列。那麼，做...