JavaShuo
欄目
標籤
vue如何使用element-ui實現循環嵌套的表單
時間 2019-11-24
標籤
vue
如何
使用
element
實現
循環
嵌套
表單
欄目
HTML
简体版
原文
原文鏈接
一、前提基礎
熟悉vue.js以及element-ui。
已經建立好的vue項目。
二、功能描述
頁面效果以下:
功能點介紹:這是一個描述產品信息的頁面,總體是一個form表單,須要驗證產品名稱和描述。針對這個產品須要問題列表,用於收集用戶對這個產品的反饋信息。問題列表能夠不填,可是一旦添加了問題,問題的標題和描述都是必填的。
按鈕功能描述:
點擊添加按鈕,添加一個問題的表單,出現收起按鈕;
點擊清除按鈕,清除全部的問題表單,收起按鈕消失;
點擊收起按鈕,表單收起,文案變成展開;點擊展開,表單展開,文案變成收起;
每一個表單都有一個刪除按鈕,點擊刪除,刪除對應的問題表單,問題一、問題二、等從新排序。當刪除全部問題表單以後,收起按鈕消失;
三、代碼講解
新建一個FormExample.vue的頁面,添加到項目路由並打開此頁面(省略css樣式部分)。
建立一個form表單:
添加子表單部分:
對添加和清除按鈕添加點擊事件:
點擊添加按鈕出現收起按鈕,點擊清除清空表單:
給收起按鈕添加點擊事件:
點擊收起按鈕,表單收起,文案變成展開;點擊展開,表單展開,文案變成收起;經過isShow參數來控制問題表單的height實現收起與展開的效果。
給每一個問題表單的刪除添加點擊事件:
到此頁面邏輯已經基本實現。如今咱們來給表單添加驗證規則,添加submitForm方法。
此時只是添加了父表單的驗證方法,當問題列表表單有問題的時候也須要驗證問題表單,給自表單添加驗證規則:
先檢驗父級表單,若是父表單驗證經過,繼續驗證子表單,返回子表單的驗證結果,頁面效果以下,若是此時處於收起狀態,頁面將自動展開,並拋出錯誤:
若是子表單也驗證經過,點擊保存將會提交成功:
到此咱們的功能已經所有實現。
四、功能擴展
思考:當咱們不單單隻有一個問題列表,而是同時有多個相似的子表單時該怎麼實現呢?
頁面效果以下:
能夠先自行思考,若是想不明白的能夠@我,我將會在後續解答。tips: 此時咱們須要子表單的驗證方法,childList,childForm參數變成一個可配置的變量便可。
相關文章
1.
vue嵌套循環
2.
vue elementUI 表單校驗(多層嵌套)
3.
vue + elementUI 表單嵌套驗證
4.
循環嵌套與列表
5.
如何跳出嵌套循環
6.
循環嵌套的應用
7.
循環的嵌套
8.
嵌套循環
9.
循環嵌套
10.
break的使用for循環嵌套
更多相關文章...
•
XSD 如何使用?
-
XML Schema 教程
•
Lua 循環嵌套
-
Lua 教程
•
☆基於Java Instrument的Agent實現
•
TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
循環使用
簡單循環
嵌套
循環
套環
單套
如何
何如
vue&elementui
elementui+vue
HTML
SQLite教程
紅包項目實戰
Spring教程
應用
0
分享到微博
分享到微信
分享到QQ
每日一句
每一个你不满意的现在,都有一个你没有努力的曾经。
最新文章
1.
resiprocate 之repro使用
2.
Ubuntu配置Github並且新建倉庫push代碼,從已有倉庫clone代碼,並且push
3.
設計模式9——模板方法模式
4.
avue crud form組件的快速配置使用方法詳細講解
5.
python基礎B
6.
從零開始···將工程上傳到github
7.
Eclipse插件篇
8.
Oracle網絡服務 獨立監聽的配置
9.
php7 fmp模式
10.
第5章 Linux文件及目錄管理命令基礎
本站公眾號
歡迎關注本站公眾號,獲取更多信息
相關文章
1.
vue嵌套循環
2.
vue elementUI 表單校驗(多層嵌套)
3.
vue + elementUI 表單嵌套驗證
4.
循環嵌套與列表
5.
如何跳出嵌套循環
6.
循環嵌套的應用
7.
循環的嵌套
8.
嵌套循環
9.
循環嵌套
10.
break的使用for循環嵌套
>>更多相關文章<<