真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Vue中怎么利用ElementUI實現(xiàn)表單動態(tài)渲染

本篇文章為大家展示了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渲染成這樣:

Vue中怎么利用ElementUI實現(xiàn)表單動態(tài)渲染 

最后提交表單的數(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 :

Vue中怎么利用ElementUI實現(xiàn)表單動態(tài)渲染 




完整代碼: src/components/dynamic-form/input-number.vue

2.異步驗證

得益于 async-validator ,我們可以很方便地自定義驗證規(guī)則。

Vue中怎么利用ElementUI實現(xiàn)表單動態(tài)渲染 

在配置中

{
 "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è)資訊頻道。


新聞標題:Vue中怎么利用ElementUI實現(xiàn)表單動態(tài)渲染
文章出自:http://weahome.cn/article/gogcoh.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部