解决Layui框架radio、checkbox、select等组件不能动态显示的办法

前言

最近在写项目时发现layui框架中对于表单模块给予了内置的一套规则,有时候我们需要在表单元素,如radio、checkbox、select等组件让其动态显示,而作者在执行全选时遇到了一个问题,就是将组件绑定点击事件之后,js修改组件的checked,但是网页中组件元素的样式并没有发生改变,相信你也遇到过这样的问题。

当然layui作者当时是这样解释的

有些时候,你的有些表单元素可能是动态插入的。这时 form 模块
的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif) 但没有关系,你只需要执行
form.render(type, filter); 方法即可。

第一个参数:type,为表单的 type 类型,可选。默认对全部类型的表单进行一次更新。可局部刷新的 type 如下表:

参数type(值)描述
select刷新select选择框渲染
checkbox刷新checkbox复选框(含开关)渲染
radio刷新radio单选框框渲染

官方解决办法:

form.render(); //更新全部
form.render(‘select’); //刷新select选择框渲染

--------------- 作者使用后,并未见效

捷径解决办法

既然layui官方为这些组件自定义了样式,那我们可不可以在这个组建中取消layui样式,让它保留原生样式,再对他使用js进行绑定修改呢。

答案是 绝对可以

只需在对应的组件中输入 lay-ignore 属性,组件就会回到原生样式。然后现在他的动态显示也能很好的使用了,至于原生样式美观程度,这个你可以再写style去调整喽。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值