LayUI学习——date控件渲染失败或table空间渲染失败

最新推荐文章于 2025-04-10 11:35:13 发布

neodke

最新推荐文章于 2025-04-10 11:35:13 发布

阅读量490

点赞数 1

CC 4.0 BY-SA版权

文章标签： layui 学习前端

本文链接：https://blog.youkuaiyun.com/neodke/article/details/134494874

文章讲述了在使用layui库时，遇到控件渲染失败的情况，特别是表格和时间控件的配合问题。作者指出，只需定位并修复错误的控件，如时间控件的lay-key问题已得到官方优化，而表格cols配置格式的错误是关键问题所在。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先js代码和java一样,其中一部分出错,整个程序就会崩溃.所以js中只要有一个控件渲染失败,其他控是不会渲染.假设你导入了10个控件,前9个都正常,第10个出错,那么前9个是不会渲染的.

所以一旦控件渲染失败,检查控制台,看一看是哪一个控件出问题了,进行修改即可,你不用纠结第一个控件为什么没有渲染成功.

目前layui的官方文档中时间控件的渲染方法,是完全正确的,不用怀疑是不是缺少什么属性,或者没有加那个方法,至于有些文章中提到的lay-key的问题,完全不用担心,官方早已经优化了.只需要找到其他控件的错误进行修改即可

<input type="text" class="layui-input" 
       id="xxxx"
       placeholder=" - ">

layui.use(function(){
  var laydate = layui.laydate;

  laydate.render({
    elem: "#xxxx"
    )}
这样就完成了日期控件的渲染了

最终效果是

我个人的教训

表格控件和时间控件一起使用,表格控件的cols值的格式出问题

官方文档:  cols:[[
              ↑↑↑↑↑         {
                            field: 'empId',
                            title: '员工ID',
                            width: 80,
                            sort: true
                        },
                
                ]]

//-----------------------------------------------------------------------
//        实际使用中两个中括号[[]]之间要换行,否则框架回会识别出错  ,
//            我是配合thymeleaf框架一起使用,出现了识别不清的问题.
//-----------------------------------------------------------------------

cols: [
      ↑↑↑↑↑ [
            ↑↑↑↑↑      {
                        field: 'empId',
                            title: '员工ID',
                            width: 80,
                            sort: true
                        },
                        {
                            field: 'name',
                            title: '员工姓名',
                            width: 80,
                            sort: true
                        },

                        {
                            field: 'sex',
                            title: '性别 ',
                            width: 100,
                            sort: true
                        },

                        {
                            field: 'sal',
                            title: '员工工资',
                            width: 100,
                            sort: true
                        },
                        {
                            field: 'birthday',
                            title: '生日',
                            width: 80,
                            sort: true
                        },
                        {
                            field: 'address',
                            width: 100,
                            title: '积分',
                            sort: true
                        },
                        {
                            field: 'deptId',
                            title: '打卡',
                            width: 100,
                            sort: true
                        },
                        {
                            title: '操作',
                            width: 120,
                            fixed: 'right'
                        }
                    ]
                ]

表格控件渲染失败,导致时间控件渲染失败.

若果对你有帮助,给个赞,鼓励一下