淺談Vue+Ant Design form表單的一些坑
最近在用 vue + ant 寫項(xiàng)目發(fā)現(xiàn) from 組件的坑還是比較多的
設(shè)置默認(rèn)值的坑
控制臺(tái)報(bào) Warning: You cannot set a form field before rendering a field associated with the value. You can use getFieldDecorator(id, options) instead v-decorator="[id, options]" to register it before render.
問(wèn)題原因: 產(chǎn)生此問(wèn)題的原因是 調(diào)用 setFieldsValue 方法時(shí) 入?yún)?duì)象設(shè)置了一些不該存 在 或頁(yè)面異步判斷的一些值
此時(shí)的 row 是直接調(diào)用接口拿到的數(shù)據(jù) 有一些其他不需要設(shè)置的值 如創(chuàng)建時(shí)間, 這時(shí)候就會(huì)報(bào)錯(cuò)
解決思路: 使用 lodash.pick 方法和 object.assign 來(lái)設(shè)置需要渲染表單的值
優(yōu)化后:
之后又出現(xiàn)了新的問(wèn)題, 因?yàn)轫?yè)面上的異常處理是異步判斷的, 使用了 serializeType 來(lái)判斷是否顯示, 這時(shí)候直接設(shè)置 exceptionHandler 也是會(huì)報(bào)同樣的錯(cuò)誤
解決思路: 用 promise 先設(shè)置可以直接渲染的值 其他異步判斷的值二次渲染
優(yōu)化后:
問(wèn)題解決
自定義 v-decorator 組件的坑
控制臺(tái)報(bào): Warning: MachineMultiSelector default value can not collect, please use option.initialValue to set default value.
自定義 v-decorator 的組件需要兩個(gè)基本設(shè)置, 父?jìng)髯拥?value 屬性, 和 value 發(fā)生變化子傳父的change 事件
這個(gè)問(wèn)題產(chǎn)生的原因是 不可以給 props 的 value 設(shè)置默認(rèn)值, 可以用 decorator.option.initialValue 屬性設(shè)置默認(rèn)值
修改后:
問(wèn)題解決
到此這篇關(guān)于淺談Vue+Ant Design form表單的一些坑的文章就介紹到這了,更多相關(guān)Vue Ant Design form表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue中使用rules對(duì)表單字段進(jìn)行驗(yàn)證方式
這篇文章主要介紹了在vue中使用rules對(duì)表單字段進(jìn)行驗(yàn)證方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue2學(xué)習(xí)筆記之請(qǐng)求數(shù)據(jù)交互vue-resource
本篇文章主要介紹了Vue2學(xué)習(xí)筆記之?dāng)?shù)據(jù)交互vue-resource ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
這篇文章主要給大家介紹了關(guān)于Vue 2.0中生命周期與鉤子函數(shù)的相關(guān)資料，對(duì)大家學(xué)習(xí)或者使用vue2.0具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨小編一起來(lái)看看吧。2017-05-05
vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
使用Vue.js中的過(guò)濾器實(shí)現(xiàn)冪方求值的方法
這篇文章主要介紹了使用Vue.js中的過(guò)濾器實(shí)現(xiàn)冪方求值的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例
這篇文章主要介紹了Vue2+Element-ui實(shí)現(xiàn)el-table表格自適應(yīng)高度的案例,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解
這篇文章主要為大家介紹了vue動(dòng)態(tài)代理無(wú)須重啟項(xiàng)目解決方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
這篇文章主要介紹了vue中如何使用element的日歷組件，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09
在項(xiàng)目開(kāi)發(fā)中,經(jīng)常會(huì)用到svg圖標(biāo),之前用的都是vue-svg-icon,接下來(lái)通過(guò)本文給大家介紹Vue中使用SVG-ICON的配置方法,感興趣的朋友跟隨小編一起看看吧2024-02-02
模板內(nèi)的表達(dá)式非常便利，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。接下來(lái)通過(guò)本文給大家介紹vue中的計(jì)算屬性,需要的朋友可以參考下2018-09-09