最近在用 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)文章希望大家以后多多支持腳本之家！