layui 表格添加 checkbox 开关

小二·2024-05-02 8:48

记录：

使用数据表格获取到数据以后用表格中加载表单元素

{field: 'test', width: '20%', title: '是否显示', align: 'center', unresize: true ,templet: '#switchTpl'}

由于获取到的 test 数据为的 value值 true 所以使用时候直接写了

<input type="checkbox" name="fddefault" value="{{d.fddefault}}" lay-skin="switch" lay-text="是|否" lay-filter="faultReveal"
           {{ d.fddefault == true ? `checked` : `` }}>

试了各种办法都是不会渲染开关打开

在代码中加 form.render('checkbox'); 重新渲染也没办法

<input type="checkbox" name="test" lay-skin="switch" lay-text="是|否" lay-filter="faultReveal"
           checked="checked"></input>
    {{# }else{ }}
    <input type="checkbox" name="fddefault" lay-skin="switch" lay-text="是|否" lay-filter="faultReveal"></input>
    {{# } }

有使用了 if判断也麽办

最后发现我获取到的 true 是String 类型但是 Boolean 类型的所以给 true 加上引号改为字符串就ok了

还遇到在 html 中写官方给的三目运算时候 ' ？' 报错所以使用了 `` 这个代替引号就不报错了虽然报错不影响到那时看着不好看有错误其他的开发工具没试过但是 IDEA 中发现这个问题用 ` ` 代替就好了

<input type="checkbox" name="fddefault" value="{{d.fddefault}}" lay-skin="switch" lay-text="是|否" lay-filter="faultReveal"
           {{ d.fddefault == `true` ? `checked` : `` }}>

正确的如果取出来数据不好判断的话可以这样

{field: 'test', width: '20%', title: '字段是否显示', align: 'center', unresize: true ,templet: '#switchTpl' , exportTemplet: function(d){
                            if(d.fddefault == true){
                                return true;
                            }else{
                                return false;
                            }
                            console.log(d.fddefault)
                            return d.fddefault;
                        }}