解决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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
js实现滚动条滚动到页面底部继续加载
Dec 19 Javascript
js 判断附件后缀的简单实现方法
Oct 11 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
详解一个基于套接字实现长连接的express
Mar 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 win下Socket方式发邮件类
2009/08/21 PHP
PHP 读取文件内容代码(txt,js等)
2009/12/06 PHP
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
PHP的拦截器实例分析
2014/11/03 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
2015/09/27 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
python实现微信打飞机游戏
2020/03/24 Python
如何理解python中数字列表
2020/05/29 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
高校教师岗位职责
2014/03/18 职场文书
工作建议书范文
2014/05/13 职场文书
暑假学习心得体会
2014/09/02 职场文书
优秀共产党员演讲稿
2014/09/04 职场文书
员工试用期自我评价
2014/09/18 职场文书
学校运动会报道稿
2014/09/23 职场文书
工作作风建设心得体会
2014/10/22 职场文书
个人典型事迹材料
2014/12/30 职场文书
答辩状格式范本
2015/05/22 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书