问题:

当我们再使用LayUI的Form表单模块时,我们会把自己需要的表单赋值到我们的页面中,但是会出现无法正常显示的问题,如下:

出现原因:

LayUI官方文档也明确表示:“当你使用表单时,layui 会对 select、checkbox、radio 等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于 form 组件,所以你必须加载 form。”

所以我们必须加载form模块,才能使它完整地渲染出来。

解决方法:

在你js文件的代码最外层,把需要用到的模块 layui.use 预加载一下,如:

  1. /**
  2. 你的js文件
  3. **/
  4. //我们强烈推荐你在代码最外层把需要用到的模块先加载
  5. layui.use(['layer', 'form', 'element'], function(){
  6. var layer = layui.layer
  7. ,form = layui.form
  8. ,element = layui.element
  9. //……
  10. //你的代码都应该写在这里面
  11. });

当我们把这行代码执行完之后,整个表单页面就可以完整地渲染出来了,问题解决。

总结:

当我们在使用LayUI的表单时,我们要记得先把表单模块预加载出来。把这两部分当成一个整体来操作就OK了。

2020-04-02

LayUi表单模块无法正常显示的更多相关文章

  1. dedecms织梦二次开发报名表单模块插件安装及配置详细教程

    网上找了很多,都不是太满意,功能不全不全不说,还没有详细的安装配置教程,经过自己的折腾,成功了修改程序并配置成功,亲测,试用没有问题!所以,决定给大家出一个针对新手的详细教程. 废话不多,直接上干货. ...

  2. layui 表单遇到的小问题

    select中的option 居中显示 /*select显示的option居中*/ /*.layui-select-title input{ text-align: center; }*/ /*opt ...

  3. layui表单一

    1. ***首先明确一点 表单的以来加载模块是 form.如果不加载form模块,select.checkbox.radio等将无法显示,并且无法使用form相关功能. 我们用layui官网的样本来做 ...

  4. “此网页上的某个 Web 部件或 Web 表单控件无法显示或导入。找不到该类型,或该类型未注册为安全类型。”

    自从vs装了Resharper,看见提示总是手贱的想去改掉它.于是乎手一抖,把一个 可视web部件的命名空间给改了. 喏,从LibrarySharePoint.WebPart.LibraryAddEd ...

  5. layui表单验证

    layui表单元素的校验只需在元素上加入lay-verify,layui提供了以下值. required(必填项) phone(手机号) email(邮箱) url(网址) number(数字) da ...

  6. 【Excle数据透视表】如何水平并排显示报表筛选区域的字段

    原始效果 目标效果 解决方案 设置数据透视表"在报表区域筛选显示字段"为"水平并排" 步骤 方法① 单击数据透视表任意单元格→数据透视表工具→分析→选项→布局和 ...

  7. zencart批量表上传后 标题显示为网址 批量修改标题状态 SEO三要素

    zencart批量表上传后 标题显示为网址,原因是导入批量表时,产品标题对应状态被重置为0导致的 批量修改标题状态 ', metatags_products_name_status ', metata ...

  8. layui表单提交

    关于layui表单提交  只是简单用一个文本框记录一下提交过程    其他的如下拉框选择框样式可以参考官网 下面直接开始.首 一:前台页面 <!DOCTYPE html><html& ...

  9. HarmonyOS单模块编译与源码导读

    我这里以3518的开发板为例进行讲解,3516的也是通用的. 下面是之前全量编译的脚本 python build.py ipcamera_hi3518ev300 -b debug HarmonyOS最 ...

随机推荐

  1. CS144学习(2)TCP协议实现

    Lab1-4 分别是完成一个流重组器,TCP接收端,TCP发送端,TCP连接四个部分,将四个部分组合在一起就是一个完整的TCP端了.之后经过包装就可以进行TCP的接收和发送了. 代码全部在github ...

  2. 013.NET5_MVC_Razor扩展Html控件01

    Razor扩展控件  第一种方式: 1. 定义一个静态类 2. 定义静态扩展方法,扩展IHtmlHelper类型,返回IHtmlContent类型: 本质:通过后台方法,返回一个已经存在的Html标签 ...

  3. 蓝桥杯——试题 算法训练 Sereja and Squares

    Java 代码 ```` import java.util.Scanner; public class Main { private static long num = 0; private stat ...

  4. js arrow function return object

    js arrow function return object bug filterData: { type: Object, default: () => {}, required: true ...

  5. OOP & 模块化, 多态, 封装

    OOP 面向对象编程 (OOP) 是用抽象方式创建基于现实世界模型的一种编程模式.它使用先前建立的范例,包括模块化,多态和封装几种技术. 在 OOP 中,每个对象能够接收消息,处理数据和发送消息给其他 ...

  6. vue & npm & components & plugins

    vue & npm & components & plugins how to publish an vue ui component to npm? https://www. ...

  7. perl 打印目录结构

    更多 #!/usr/bin/perl # 递归打印目录结构 use v5.26; use strict; use utf8; use autodie; use warnings; use Encode ...

  8. 高倍币VAST了解一下,如何掀起算力挖矿新热潮?

    随着比特币.以太坊等主流数字货币的起起落落,市场对于数字货币交易似乎进入了冷却期.很多生态建设者开启了观望态度,机构以及巨鲸们也开始纷纷着手分散投资.就在此时,一个新的概念逐步露出头角,吸引了大众关注 ...

  9. Captain technology INC:全球新能源汽车格局突变

    美国能源信息署EIA的统计数据显示,2020年上半年全美含纯电动和插电混动在内的新能源乘用车总销量仅为11.1万辆,同比缩水25%.虽然特斯拉在第三季度靠着13.93万辆的销量迎来了环比387%.同比 ...

  10. NGK公链大事件盘点——回顾过去,展望未来!

    NGK公链构想广阔,愿景宏大,2020年10月NGK正式上线,同时NGK全球发布会正式启动,建立区块链生态体系. 早在这之前,NGK就经过了紧锣密鼓的数年缜密搭建. 2018年6月NGK底层系统技术原 ...