解决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 相关文章推荐
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
一个网马的tips实现分析
Nov 28 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
Apr 12 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
浅谈JavaScript中的Math.atan()方法的使用
Jun 14 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 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不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
Yii2使用自带的UploadedFile实现的文件上传
2016/06/20 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
php精度计算的问题解析
2019/06/21 PHP
JS实现日期加减的方法
2013/11/29 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
vue解决跨域路由冲突问题思路解析
2017/11/03 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
关于Vue项目跨平台运行问题的解决方法
2018/09/18 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
vue表单中遍历表单操作按钮的显示隐藏示例
2019/10/30 Javascript
基于python 字符编码的理解
2017/09/02 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
CSS3感应鼠标的背景闪烁和图片缩放动画效果
2014/05/14 HTML / CSS
金智子午JAVA面试题
2015/09/04 面试题
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
Java语言程序设计测试题选择题部分
2014/04/03 面试题
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
航空大学应届生求职信
2013/11/10 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
医院信息公开实施方案
2014/05/09 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
小学生表扬稿范文
2015/05/05 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
Go语言并发编程 sync.Once
2021/10/16 Golang