解决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 数值型和字符串型之间的转换
Jul 25 Javascript
js操作二级联动实现代码
Jul 27 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
Feb 26 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
Nov 24 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
基于Vue CSR的微前端实现方案实践
May 27 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 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程序实现支持页面后退的两种方法
2008/06/30 PHP
解析argc argv在php中的应用
2013/06/24 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
如何用PHP来实现一个动态Web服务器
2015/07/29 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
解决laravel session失效的问题
2019/10/14 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
jquery插件推荐浏览器嗅探userAgent
2014/11/09 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
js实现蒙版效果
2020/01/11 Javascript
python 生成器协程运算实例
2017/09/04 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
应聘自荐书
2013/10/08 职场文书
护士辞职信模板
2014/01/20 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
中学教师师德承诺书
2014/05/23 职场文书
安全生产协议书
2016/03/22 职场文书
python获取字符串中的email
2022/03/31 Python