layui使用的时候select下拉框没有样式
这个地方绝对是待提升的地方
1.首先说一下为什么会出现这种情况
官方解释
有些时候,你的有些表单元素可能是动态插入的。这时形式模块的自动化渲染是会对其失效的。虽然我们没有双向绑定机制(因为我们叫经典模块化框架,偷笑.gif)但是没有关系,你只需要执行 form.render(type,filter); 方法即可。
解决方案也有
- form.render(); //更新全部
- form.render( '选择'); //刷新选择选择框渲染
具体实现
layui.use('form', function(){
var form = layui.form;
form.render('select');
//监听提交
form.on('submit(formDemo)', function(data){
// layer.msg(JSON.stringify(data.field));
console.log(data.field)
// return false;
});
});
官方答案地址
https://www.layui.com/doc/modules/form.html#render
个人觉得还是稍微会出错误,不是忒别的灵活。
有待提高解决方案
可以从点击下拉框的时候再次刷新也不错。
应为体验感极差所以官方给出了处理方法,回复原生的select在select上加入lay-ignore
<div class="layui-form-item">
<label class="layui-form-label" >选择框</label>
<div class="layui-input-block">
<select name="relevance" style="width: 270px;height: 38px;border-radius: 1px solid #F2F2F2;font-size: 16px;" lay-ignore class="opt" lay-filter='test2' lay-verify="required">
<option value="0">北京</option>
</select>
</div>
</div>
加入样式