解决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 相关文章推荐
FileUpload上传图片(图片不变形)
Aug 05 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
轻松搞定js表单验证
Oct 13 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 Javascript
vue实现多级菜单效果
Oct 19 Javascript
Vue实现计算器计算效果
Aug 17 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防止网站被刷新的方法汇总
2014/12/01 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
python 类详解及简单实例
2017/03/24 Python
django上传图片并生成缩略图方法示例
2017/12/11 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
Python 定义只读属性的实现方式
2020/03/05 Python
Python实现Canny及Hough算法代码实例解析
2020/08/06 Python
大学生求职简历的自我评价
2013/10/14 职场文书
企业行政文员岗位职责
2013/12/03 职场文书
竞职演讲稿范文
2014/01/11 职场文书
《广玉兰》教学反思
2014/04/14 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
Python+Appium新手教程
2021/04/17 Python
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
浅谈pytorch中的dropout的概率p
2021/05/27 Python