解决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优化技巧(文件瘦身篇)
Jan 28 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
javascript获取元素CSS样式代码示例
Nov 28 Javascript
jquery判断单选按钮radio是否选中的方法
May 05 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
微信小程序实现登录遮罩效果
Nov 01 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 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 使用MySQL管理Session的回调函数详解
2013/06/21 PHP
PHP中curl_setopt函数用法实例分析
2015/04/16 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jQuery.getScript加载同域JS的代码
2012/02/13 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
AngularJS中$http服务常用的应用及参数
2016/08/22 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
javascript中数组的常用算法深入分析
2019/03/12 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
vue 返回上一页,页面样式错乱的解决
2019/11/14 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Element-UI 使用el-row 分栏布局的教程
2020/10/26 Javascript
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中super关键字用法实例分析
2015/05/28 Python
python日期时间转为字符串或者格式化输出的实例
2018/05/29 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python中class的定义及使用教程
2019/09/18 Python
python3连接MySQL8.0的两种方式
2020/02/17 Python
Python定时器线程池原理详解
2020/02/26 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
资生堂美国官网:Shiseido美国
2016/09/02 全球购物
制药工程专业应届生求职信
2013/09/24 职场文书
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
《巨人的花园》教学反思
2014/02/12 职场文书
保护动物的标语
2014/06/11 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
民间借贷借条如何写
2015/05/26 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
关于党风廉政建设宣传教育月的活动总结!
2019/08/08 职场文书