解决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 全等号运算符使用说明
May 31 Javascript
Javascript动态绑定事件的简单实现代码
Dec 25 Javascript
从零开始学习jQuery (六) jquery中的AJAX使用
Feb 23 Javascript
jquery attr 设定src中含有&(宏)符号问题的解决方法
Jul 26 Javascript
浅谈JS原型对象和原型链
Mar 02 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
Mar 22 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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获取汉字拼音首字母的方法
2015/10/21 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
php实现文件预览功能
2017/05/23 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PHP $O00OO0=urldecode & eval 解密,记一次商业源码的去后门
2020/09/13 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
javascript九宫格图片随机打乱位置的实现方法
2017/03/15 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Python 支持向量机分类器的实现
2020/01/15 Python
哪些是python中web开发框架
2020/06/17 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
中专自我鉴定范文
2013/10/16 职场文书
装饰资料员岗位职责
2013/12/30 职场文书
《临死前的严监生》教学反思
2014/02/13 职场文书
集体婚礼策划方案
2014/02/22 职场文书
关于建议书的格式范文
2014/05/20 职场文书
小学生春游活动方案
2014/08/20 职场文书
2014年科技工作总结
2014/11/26 职场文书