LayUI中开关回显的解决办法

前端

<label class="layui-form-label xrequired">是否启用</label>
 <div class="layui-input-inline">
       <input id="id_switch" type="checkbox" name="flag" lay-skin="switch" lay-text="ON|OFF" lay-filter="isUsedSwitch" VALUE="ON" >
 </div>

JS

layui.use(['laypage', 'layer', 'table', 'element', 'form'], function() {
        var layer = layui.layer; //弹层
        var form = layui.form; //表格
        //获取传参
        let param = JSON.parse(decodeURIComponent(getRequestParam().obj));
        //页面加载时获取开关的值进行回显
        layer.ready(function(){
            if(param.flag=="ON"){
                $('#id_switch').prop("checked", true);
                layui.form.render();
            }else {
                $('#id_switch').prop("checked", false);
                layui.form.render();
            }
        });
    });

解决思路是：

1. 获取回显数据对象
2. 判断后台返回的flag是什么状态
3. $(‘#id_switch’).prop(“checked”, true);使用ID选择器找到当前input元素后添加属性值checked
4. 重新加载表单

效果展示：

进入编辑页面后，开关中回显当前状态