淺談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.
問題原因: 產(chǎn)生此問題的原因是 調(diào)用 setFieldsValue 方法時(shí) 入?yún)?duì)象設(shè)置了一些不該存 在 或頁面異步判斷的一些值
此時(shí)的 row 是直接調(diào)用接口拿到的數(shù)據(jù) 有一些其他不需要設(shè)置的值 如創(chuàng)建時(shí)間, 這時(shí)候就會(huì)報(bào)錯(cuò)
解決思路: 使用 lodash.pick 方法和 object.assign 來設(shè)置需要渲染表單的值
優(yōu)化后:
之后又出現(xiàn)了新的問題, 因?yàn)轫撁嫔系漠惓Ｌ幚硎钱惒脚袛嗟? 使用了 serializeType 來判斷是否顯示, 這時(shí)候直接設(shè)置 exceptionHandler 也是會(huì)報(bào)同樣的錯(cuò)誤
解決思路: 用 promise 先設(shè)置可以直接渲染的值 其他異步判斷的值二次渲染
優(yōu)化后:
問題解決
自定義 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è)問題產(chǎn)生的原因是 不可以給 props 的 value 設(shè)置默認(rèn)值, 可以用 decorator.option.initialValue 屬性設(shè)置默認(rèn)值
修改后:
問題解決
到此這篇關(guān)于淺談Vue+Ant Design form表單的一些坑的文章就介紹到這了,更多相關(guān)Vue Ant Design form表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了詳解Vue 動(dòng)態(tài)添加模板的幾種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
VUE 實(shí)現(xiàn)一個(gè)簡(jiǎn)易老虎機(jī)的項(xiàng)目實(shí)踐
老虎機(jī)在很多地方都可以見到，可以設(shè)置中獎(jiǎng)位置，以及中獎(jiǎng)回調(diào)，本文主要介紹了VUE 實(shí)現(xiàn)一個(gè)簡(jiǎn)易老虎機(jī)的項(xiàng)目實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要為大家詳細(xì)介紹了一些vue使用axios的小技巧,文中的示例代碼講解詳細(xì),對(duì)我們深入掌握vue有一定的幫助,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
這篇文章主要介紹了vue?props?type設(shè)置多個(gè)類型，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目出現(xiàn)ERESOLVE could not resolve問題及解決
這篇文章主要介紹了vue項(xiàng)目出現(xiàn)ERESOLVE could not resolve問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue頁面堆棧管理器2021-10-10
Vue3+Element?Plus使用svg加載iconfont的處理方法
這篇文章主要介紹了Vue3+Element?Plus使用svg加載iconfont的解決方案,本文詳細(xì)介紹了如何在Element?Plus中使用iconfont，簡(jiǎn)單的說就是要將其封裝成SVG，并且支持動(dòng)態(tài)修改顏色，需要的朋友可以參考下2022-08-08
Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟
寫后臺(tái)管理的時(shí)候會(huì)有很多列表以及相應(yīng)的條件查詢,下面這篇文章主要給大家介紹了關(guān)于Vue3使用Element?Plus實(shí)現(xiàn)列表界面的方法步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue中ref的用法及演示，ref被用來給元素或子組件注冊(cè)引用信息。引用信息會(huì)被注冊(cè)在父組件上的$refs對(duì)象上，下面來看看文章的詳細(xì)內(nèi)容,需要的朋友可以參考一下2021-11-11
Vue實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何實(shí)現(xiàn)實(shí)時(shí)更新sessionStorage數(shù)據(jù)，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以參考一下2023-06-06