解决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 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
如何快速上手Vuex
Feb 14 Javascript
JavaScript验证知识整理
Mar 24 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php获取给定日期相差天数的方法分析
2017/02/20 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jquery validate poshytip 自定义样式
2012/11/26 Javascript
js模仿hover的具体实现代码
2013/12/30 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
深入理解Angular中的依赖注入
2017/06/26 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
javascript中call()、apply()的区别
2019/03/21 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
JavaScript计算出两个数的差值
2020/03/19 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
探究python中open函数的使用
2016/03/01 Python
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python 给屏幕打印信息加上颜色的实现方法
2019/04/24 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
会计顶岗实习心得
2014/01/25 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
会计专业自荐书
2014/07/08 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
服务承诺书
2015/01/19 职场文书
班主任开场白
2015/06/01 职场文书
教师节感想
2015/08/11 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
(开源)微信小程序+mqtt,esp8266温湿度读取
2021/04/02 Javascript