前言:
记录在修改bug时遇到的一些奇怪问题。
遇到的奇怪问题1:
项目中引入了 layui,而且也使用了 layui.use 按需导入了需要的组件,但是在页面每次刚初始化的时候去使用layui,控制台都会报 组件未定义的问题(正常打印layui是可以打印的,但是调用layui.layer或layui.form会报错)。所以在请求接口前,在ready函数里面重新使用layui.use()方法导入form组件
奇怪问题2:
在没有使用layui.use("form",function(){})导入组件的时候,页面上select的样式是原生样式,layui样式不会生效。
正文:(select 的使用方式)
html
<select id="zdName" lay-filter="zdFilter">
<option value="">全部</option>
</select>
javascript
$(document).ready(function(){
layui.use('form',function(){
let form = layui.form;
//获取部门
departListFun()
})
})
//获取部门数据接口
function departListFun() {
$.ajax({
url: rootPath + '/department/listDepartmentAll',
type: 'get',
dataType: 'json',
success:function(data){
if (data.length > 0) {
let zdDom = document.getElementById("zdName")
for(let i = 0; i < data.length; i++){
let option = new Option(data[i].name,data[i].name)
zdDom.add(option)
}
layui.form.render('select')
//事件绑定
layui.form.on("select(zdFilter)",function(data){
// 重新获取数据
depart = data.value
//走接口画柱状图
getDataByDepart()
//下面柱状图进行联动
getDataByType()
})
}
}
})
}
layui.form.render("select") 一定一定一定不能忘记!!!
form.on("select(filter)",callback)
select 为选择框事件固定名称
filter 为选择框元素对应的 lay-filter 属性值