解决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 相关文章推荐
javascript写的一个链表实现代码
Oct 25 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
Angularjs过滤器使用详解
May 25 Javascript
详解jQuery的表单验证插件--Validation
Dec 21 Javascript
Vue实现导出excel表格功能
Mar 30 Javascript
vue项目中axios请求网络接口封装的示例代码
Dec 18 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
缅甸的咖啡简史
2021/03/04 咖啡文化
快速开发一个PHP扩展图文教程
2008/12/12 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
2010/09/28 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
Jquery promise实现一张一张加载图片
2015/11/13 Javascript
JS图片放大效果简单实现代码
2016/09/08 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
详解Python编程中time模块的使用
2015/11/20 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
python3 实现调用串口功能
2019/12/26 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2016/07/11 面试题
教你怎样写好自我评价
2013/10/05 职场文书
档案检查欢迎词
2014/01/13 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
党员大会主持词
2014/04/02 职场文书
三潭印月的导游词
2015/02/12 职场文书
2016年母亲节寄语
2015/12/04 职场文书
《棉鞋里的阳光》教学反思
2016/02/20 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB