前言
最近在写项目时发现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去调整喽。