Layui —— select

前言:

记录在修改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 属性值

相关推荐
程序员柳6 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
java—大象17 天前
基于java SSM的房屋租赁系统设计和实现
java·开发语言·数据库·spring boot·layui·mybatis
武昌库里写JAVA20 天前
Vue.js状态管理: 使用Vuex实现状态统一管理的最佳实践
vue.js·spring boot·毕业设计·layui·课程设计
武昌库里写JAVA20 天前
VUE vuex深入浅出
vue.js·spring boot·毕业设计·layui·课程设计
加油,前进22 天前
layui和vue父子级页面及操作
javascript·vue.js·layui
雾林小妖23 天前
Layui的table实现鼠标移入单元格后tips弹框提示
layui·tips·table内容弹框显示
武昌库里写JAVA1 个月前
IDE(集成开发环境),集成阿里云的通义大模型
vue.js·spring boot·毕业设计·layui·课程设计
MRchai__1 个月前
基于Spring Boot的云音乐平台设计与实现
layui·springboot
hbrown1 个月前
Flask+LayUI开发手记(八):通用封面缩略图上传实现
javascript·flask·layui