layui 表格添加 checkbox 开关

记录 :

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

复制代码
{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;
                        }}
相关推荐
博客zhu虎康11 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海11 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏12 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码12 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby12 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹12 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel13 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh13 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富13 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的13 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#