LayUi表单模块无法正常显示
问题:
当我们再使用LayUI的Form表单模块时,我们会把自己需要的表单赋值到我们的页面中,但是会出现无法正常显示的问题,如下:
出现原因:
LayUI官方文档也明确表示:“当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form。”
所以我们必须加载form模块,才能使它完整地渲染出来。
解决方法:
在你js文件的代码最外层,把需要用到的模块 layui.use 预加载一下,如:
- /**
- 你的js文件
- **/
- //我们强烈推荐你在代码最外层把需要用到的模块先加载
- layui.use(['layer', 'form', 'element'], function(){
- var layer = layui.layer
- ,form = layui.form
- ,element = layui.element
- //……
- //你的代码都应该写在这里面
- });
当我们把这行代码执行完之后,整个表单页面就可以完整地渲染出来了,问题解决。
总结:
当我们在使用LayUI的表单时,我们要记得先把表单模块预加载出来。把这两部分当成一个整体来操作就OK了。
2020-04-02
LayUi表单模块无法正常显示的更多相关文章
- dedecms织梦二次开发报名表单模块插件安装及配置详细教程
网上找了很多,都不是太满意,功能不全不全不说,还没有详细的安装配置教程,经过自己的折腾,成功了修改程序并配置成功,亲测,试用没有问题!所以,决定给大家出一个针对新手的详细教程. 废话不多,直接上干货. ...
- layui 表单遇到的小问题
select中的option 居中显示 /*select显示的option居中*/ /*.layui-select-title input{ text-align: center; }*/ /*opt ...
- layui表单一
1. ***首先明确一点 表单的以来加载模块是 form.如果不加载form模块,select.checkbox.radio等将无法显示,并且无法使用form相关功能. 我们用layui官网的样本来做 ...
- “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”
自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...
- layui表单验证
layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) da ...
- 【Excle数据透视表】如何水平并排显示报表筛选区域的字段
原始效果 目标效果 解决方案 设置数据透视表"在报表区域筛选显示字段"为"水平并排" 步骤 方法① 单击数据透视表任意单元格→数据透视表工具→分析→选项→布局和 ...
- zencart批量表上传后 标题显示为网址 批量修改标题状态 SEO三要素
zencart批量表上传后 标题显示为网址,原因是导入批量表时,产品标题对应状态被重置为0导致的 批量修改标题状态 ', metatags_products_name_status ', metata ...
- layui表单提交
关于layui表单提交 只是简单用一个文本框记录一下提交过程 其他的如下拉框选择框样式可以参考官网 下面直接开始.首 一:前台页面 <!DOCTYPE html><html& ...
- HarmonyOS单模块编译与源码导读
我这里以3518的开发板为例进行讲解,3516的也是通用的. 下面是之前全量编译的脚本 python build.py ipcamera_hi3518ev300 -b debug HarmonyOS最 ...
随机推荐
- HDU4565-数学推导求递推公式+矩阵快速幂
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4565 我们带着这个根号是没法计算的 我们仔细观察一下,(a+sqrt(b))^n用二项式定理展开,我 ...
- vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案
vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...
- js & document.designMode
js & document.designMode js 一键开启页面编辑模式 var mode = document.designMode; document.designMode = val ...
- React LifeCycle API
React LifeCycle API old API & new API 不可以混用 demo https://codesandbox.io/s/react-parent-child-lif ...
- 2020 web developer roadmap
2020 web developer roadmap https://github.com/kamranahmedse/developer-roadmap https://roadmap.sh/ ht ...
- Flutte 什么是Widget,RenderObjects和Elements
原文 Opacity API文档 有没有想过Flutter如何获取这些小部件并将其实际转换为屏幕上的像素? 您可能已经知道如何使用StatelessWidget和StatefulWidget.但是那些 ...
- 万链互联时代,NGK DeFi项目如何在牛市中崭露头角!
众所周知,中心化交易所存在技术风险.道德风险与法律风险.去中心化交易所像是NGK以其匿名性.安全性.私钥独立掌控的特点,弥补了中心化交易所的不足,我们看到Uniswap日成交量均超过1亿美元,甚至接近 ...
- 苏黎世财经对话区块链专家,NGK如何利用时间价值实现自身的垂直扩张?
近日,苏黎世财经日报联合法兰西金融等多家知名媒体,专访了NGK. 苏黎世财经日报专栏记者玛科尔德表示,随着NGK DeFi的明星代币BGV登上去中心化金融的舞台,它千倍的收益率让生态投资者趋之若鹜. ...
- 010_HTML5
目录 初识HTML 什么是HTML HTML发展史 HTML5的优势 W3C标准 常见IDE IDEA开发HTML IDEA创建HTML文件,并用浏览器打开 配置浏览器 HTML基础 HTML基本结构 ...
- node初体验(一)
1.node.js是一个构建在chrome V8引擎上的javascript运行环境 2.node.js特点:单线程.事件驱动.非阻塞IO模型.轻量 3.node.js是单线程的(多个请求都是一个线程 ...