LayUi表單模塊無法正常顯示

問題：

當我們再使用LayUI的Form表單模塊時，我們會把自己需要的表單賦值到我們的頁面中，但是會出現無法正常顯示的問題，如下：

 

 

出現原因：

LayUI官方文檔也明確表示：“當你使用表單時，layui 會對 select、checkbox、radio 等原始元素隱藏，從而進行美化修飾處理。但這需要依賴於 form 組件，所以你必須加載 form。”

所以我們必須加載form模塊，才能使它完整地渲染出來。

解決方法：

在你js文件的代碼最外層，把需要用到的模塊 layui.use 預加載一下，如：

1. /**
2.   你的js文件
3. **/
5. //我們強烈推薦你在代碼最外層把需要用到的模塊先加載
6. layui.use(['layer', 'form', 'element'], function(){
7.   var layer = layui.layer
8.   ,form = layui.form
9.   ,element = layui.element
11.   //……
12.   //你的代碼都應該寫在這里面
13. });

當我們把這行代碼執行完之后，整個表單頁面就可以完整地渲染出來了，問題解決。

總結：

當我們在使用LayUI的表單時，我們要記得先把表單模塊預加載出來。把這兩部分當成一個整體來操作就OK了。

 

 2020-04-02