解决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
Oct 31 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
angular过滤器实现排序功能
Jun 27 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
js实现星星海特效的示例
Sep 28 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 session处理的定制
2009/03/16 PHP
Memcache 在PHP中的使用技巧
2010/02/08 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
PHP多进程简单实例小结
2019/11/09 PHP
DWZ table的原生分页浅谈
2013/03/01 Javascript
Javascript合并表格中具有相同内容单元格示例
2013/08/11 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
JavaScript中的逻辑判断符&&、||与!介绍
2014/12/31 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
JavaScript实现图片瀑布流和底部刷新
2017/01/02 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
angularjs ocLazyLoad分步加载js文件实例
2017/01/17 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
曼城官方网上商店:Manchester City
2019/09/10 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
最新个人职业生涯规划书
2014/01/22 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
《木笛》教学反思
2014/03/01 职场文书
法律顾问服务方案
2014/05/15 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
详细总结Python常见的安全问题
2021/05/21 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python