本篇文章為大家展示了Vue中怎么利用ElementUI實現(xiàn)表單動態(tài)渲染,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細介紹希望你能有所收獲。
成都創(chuàng)新互聯(lián)公司長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù),團隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為武鄉(xiāng)企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、網(wǎng)站制作,武鄉(xiāng)網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
{ "inline": true, "labelPosition": "right", "labelWidth": "", "size": "small", "statusIcon": true, "formItemList": [ { "type": "input", "label": "姓名", "disable": false, "readonly": false, "value": "", "placeholder": "請輸入姓名", "rules": [], "key": "name", "subtype": "text" }, { "type": "radio", "label": "性別", "value": "", "button": false, "border": true, "rules": [], "key": "gender", "options": [ { "value": "1", "label": "男", "disabled": false }, { "value": "0", "label": "女", "disabled": false } ] } ] }
然后你需要把這個json渲染成這樣:
最后提交表單的數(shù)據(jù)長這樣:
{ "name": "Genji", "gender": "1" }
然后我們目標就是封裝這樣一個組件:
實現(xiàn)
開始之前,你需要知道 v-model 的工作原理 :
這不過是以下示例的語法糖:
了解這些后,我們再來一步一步實現(xiàn)這個組件。
首先,把配置轉(zhuǎn)發(fā)到 el-form :
第二步,設(shè)置默認值。
因為在每個 form-item
都會需要一個 v-model ,所以在渲染之前,保證每個字段都有值。這里需要注意一點,組件內(nèi)不要直接修改父組件傳入的 prop ,所以我們在這里用 {...this.value}
快速拷貝一份,最后別忘了通知父組件。代碼如下:
export default { props: { formConfig: {...}, value: {...}, }, methods: { setDefaultValue() { const formData = { ...this.value } // 設(shè)置默認值 this.formConfig.formItemList.forEach(({ key, value }) => { if (formData[key] === undefined || formData[key] === null) { formData[key] = value } }) this.$emit('input', formData) } }, mounted() { this.setDefaultValue() }, }
第三步,渲染 form-item 。
如何把下面的數(shù)據(jù)渲染為我們熟悉的 el-form-item ?
{ "type": "input", "label": "姓名", "disable": false, "readonly": false, "value": "", "placeholder": "請輸入姓名", "rules": [], "key": "name", "subtype": "text" }
第一種,利用 vue 內(nèi)置的 component 組件,寫起來可能像這樣:
第二種,使用 v-if 逐個判斷:
未知控件類型
考慮到每種表單控件的處理邏輯千差萬別,樓主采用了第二種方式。
根據(jù)這個思路,我們來封裝一個 dynamic-form-item
,接收一個 item ,渲染一個 el-form-item :
... 未知控件類型
tips: 使用 v-bind="$attrs" v-on="$listeners"
可以方便地轉(zhuǎn)發(fā)父組件的 v-model
指令,詳見vue高階組件。
最后,我們就可以循環(huán)輸出一個完整的表單了:
這里不能用 v-model="value[item.key]"
,上文說了,組件內(nèi)不能直接修改props,所以這里我們還是轉(zhuǎn)發(fā)一下。
methods: { handleInput(val, key) { // 這里element-ui沒有上報event,直接就是value了 this.$emit('input', { ...this.value, [key]: val }) }, setDefaultValue() {...} },
完整代碼地址: src/components/dynamic-form/form.vue
擴展功能
1.數(shù)字顯示單位,限制小數(shù)位數(shù)
element-ui 沒有做這個功能,不過我覺得還是挺常見的,所以使用 el-input 手動封裝了一個 input-number :
完整代碼: src/components/dynamic-form/input-number.vue
2.異步驗證
得益于 async-validator ,我們可以很方便地自定義驗證規(guī)則。
在配置中
{ "type": "input", ... "rules":[ { "sql": "SELECT {key} FROM balabala", "message": "xx已被占用", "trigger": "blur" } ] }
在 dynamic-form-item
組件中, 遍歷 item.rules , 將sql驗證轉(zhuǎn)化為自定義 validator 函數(shù):
...
3.省市區(qū)快捷配置
感謝 element-china-area-data 的作者。
在配置中:
{ "type": "cascader", ... "areaShortcut": "provinceAndCityData" }
在 dynamic-form-item 組件中:
...
4.從遠程加載選項
包括但不限于 radio 、 checkbox 、 cascader 、 select
在配置中:
{ "type": "checkbox", ... "optionsUrl": "/api/some/options" }
在 dynamic-form-item 組件中:
...
上述內(nèi)容就是Vue中怎么利用ElementUI實現(xiàn)表單動態(tài)渲染,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。