解决layui 表单元素radio不显示渲染的问题


Posted in Javascript onSeptember 04, 2019

最近一直在使用layui,一个对程序员相对友好的前端框架,很多效果都进行了初步的封装。

在使用过程中遇到最多的问题就是引用的问题,各种模板无法使用,虽然都一一百度解决。

本次需要解决的问题是 layui-form表单无法渲染效果。

我希望的效果是

解决layui 表单元素radio不显示渲染的问题

但是程序运行效果是

解决layui 表单元素radio不显示渲染的问题

问题分析:

因为这个表单,我是使用laytpl动态插入的,因此表单中radio的效果并没有渲染上,打开调试模式可以看到

正常的radio渲染结果,应该是包括一个i标签和一个span标签

解决layui 表单元素radio不显示渲染的问题

而我们的渲染结果,只有一个input标签

解决layui 表单元素radio不显示渲染的问题

所以导致这个位置没有数据显示。

解决:

由于该框架较新,大部分的内容只能通过官网的论坛获取,所以找了好久,最后在官方文档中看到一句话

有些时候,你的有些表单元素可能是动态插入的。这时Form模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,咩哈哈哈哈。。。),但没事,你只需要执行 form.render(type); 方法即可。

其中的type即表单的type类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表:

于是我在模板插入代码的最后,加了一句

form.render(); //更新全部

好了,问题解决!!!!!

以上这篇解决layui 表单元素radio不显示渲染的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
Bootstrap精简教程中秋大放送
Sep 15 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
JS非行间样式获取函数的实例代码
Jun 05 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
react国际化react-intl的使用
May 06 Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 #Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 #Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 #Javascript
vue-loader中引入模板预处理器的实现
Sep 04 #Javascript
解决layer图标icon不加载的问题
Sep 04 #Javascript
JSX在render函数中的应用详解
Sep 04 #Javascript
关于layui的动态图标不显示的解决方法
Sep 04 #Javascript
You might like
?算你??的 PHP 程式大小
2006/12/06 PHP
php一些公用函数的集合
2008/03/27 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
javascript实现获取cookie过期时间的变通方法
2014/08/14 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
JavaScript html5 canvas实现图片上画超链接
2017/10/20 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
Vue中props的使用详解
2018/06/15 Javascript
Jquery的Ajax技术使用方法
2019/01/21 jQuery
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
python使用reportlab画图示例(含中文汉字)
2013/12/03 Python
Python中random模块生成随机数详解
2016/03/10 Python
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python yield的用法实例分析
2020/03/06 Python
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
建筑横幅标语
2014/10/09 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
廉洁自律承诺书2015
2015/01/22 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
情况说明书怎么写
2015/10/08 职场文书
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python