layui小白不得不看的踩坑经验(持续更新)

1. layui的select下拉框不显示
描述:由于是通过ajax获取列表数据后,去渲染select,出现了option不能显示的问题
解决方法:select需要layui.use引用form,而且动态生成的元素,需要主动调用form.render()更新渲染,参数可传入type和lay-filter,见表单更新渲染

layui.use(['form'], function() {
	var form = layui.form
	...
	ajax获取数据
	$.ajax(ajax参数).done(function() {
		...其他业务
		form.render('select', 'queryform')
	})
	...
})

2. layui的form提交后会自动刷新页面
在事件监听里面需要return false;

form.on('submit(query)', function(data){
    ...其他业务
    return false;
})

3. 动态渲染的nav不能正常使用
与select同理,需要通过element.render()更新渲染,参数可传入type和lay-filter,见element更新渲染

layui.use(['element'], function() {
	var element = layui.element
	...
	ajax获取导航数据
	$.ajax(ajax参数).done(function() {
		...其他业务
		element.render('nav')
	})
	...
})

4. layui弹出式表单发生表单校验时,弹出层自动关闭
原因是layer.open不能使用默认的type,默认的type是信息框,被表单校验后弹出的信息框影响导致一起关闭了。type改为1后解决。

addDialog = layer.open({
	type: 1,
	title: '添加学校',
	content: $('#tpl-add').html(),
	move: false,
	success: function() {
	  form.render(null, 'addform');
	}
});

5. layui 表单两个按钮都触发了submit
layui表单中的按钮默认type是submit,所以都会触发submit事件。当我们需要一个确认按钮和一个取消按钮时,需要将取消按钮的type设置为button

<button class="layui-btn btn-cancel" type="button">取消</button>
发布了98 篇原创文章 · 获赞 41 · 访问量 20万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览