最近在用 vue + ant 寫項目發(fā)現(xiàn) from 組件的坑還是比較多的

設(shè)置默認(rèn)值的坑

控制臺報 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 方法時 入?yún)ο笤O(shè)置了一些不該存 在 或頁面異步判斷的一些值

此時的 row 是直接調(diào)用接口拿到的數(shù)據(jù) 有一些其他不需要設(shè)置的值 如創(chuàng)建時間, 這時候就會報錯

解決思路: 使用 lodash.pick 方法和 object.assign 來設(shè)置需要渲染表單的值

優(yōu)化后:

之后又出現(xiàn)了新的問題, 因為頁面上的異常處理是異步判斷的, 使用了 serializeType 來判斷是否顯示, 這時候直接設(shè)置 exceptionHandler 也是會報同樣的錯誤

解決思路: 用 promise 先設(shè)置可以直接渲染的值 其他異步判斷的值二次渲染

優(yōu)化后:

問題解決

自定義 v-decorator 組件的坑

控制臺報: Warning: MachineMultiSelector default value can not collect, please use option.initialValue to set default value.

自定義 v-decorator 的組件需要兩個基本設(shè)置, 父傳子的 value 屬性, 和 value 發(fā)生變化子傳父的change 事件

這個問題產(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論