淺談Vue+Ant Design form表單的一些坑

Posted on by

最近在用 vue + ant 寫項目發現 from 組件的坑還是比較多的

設置默認值的坑

控制臺報 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.

問題原因: 產生此問題的原因是 調用 setFieldsValue 方法時 入參對象設置瞭一些不該存 在 或頁面異步判斷的一些值

此時的 row 是直接調用接口拿到的數據 有一些其他不需要設置的值 如創建時間, 這時候就會報錯

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

優化後:

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

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

優化後:

問題解決

自定義 v-decorator 組件的坑

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

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

這個問題產生的原因是 不可以給 props 的 value 設置默認值, 可以用 decorator.option.initialValue 屬性設置默認值

修改後:

問題解決

到此這篇關於淺談Vue+Ant Design form表單的一些坑的文章就介紹到這瞭,更多相關Vue Ant Design form表單內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：