解决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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
两个比较有用的Javascript工具函数代码
Feb 17 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
实例分析vue循环列表动态数据的处理方法
Sep 28 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 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/05 新手入门
PHP入门学习笔记之一
2010/10/12 PHP
深入PHP变量存储的详解
2013/06/13 PHP
PHP网络操作函数汇总
2015/05/18 PHP
php使用str_shuffle()函数生成随机字符串的方法分析
2017/02/17 PHP
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
nodejs批量修改文件编码格式
2015/01/22 NodeJs
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
vue使用nprogress实现进度条
2019/12/09 Javascript
js实现烟花特效
2020/03/02 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
Python 字典与字符串的互转实例
2017/01/13 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
如何写好优秀的创业计划书
2014/01/30 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
大二学习计划书范文
2014/04/27 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
社区平安建设方案
2014/05/25 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
嵌入式Redis服务器在Spring Boot测试中的使用教程
2021/07/21 Redis
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL