layui动态渲染表格（一）

最新推荐文章于 2025-07-05 10:11:32 发布

原创最新推荐文章于 2025-07-05 10:11:32 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

前端常用知识专栏收录该内容

18 篇文章

订阅专栏

本文分享了使用layui动态渲染表格的经验，包括引入layui包、HTML和JS部分的实现，以及在数据格式和样式设置上的注意事项。在实践中遇到了数据格式要求严格和样式生效条件的问题。

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

实践是检验真理的唯一标准，只有不断的总结才会有所进步，下面总结一下我使用layui的心得和方法以及遇到的坑。

1.首先引入layui的包（从官网下载整个ui包，不要只下载layui.js和layui.css）点击打开链接

2.html部分

<table class="layui-hide" id="test"></table>

3.js部门

 layui.use(['table'], function () {
                var table = layui.table;
                table.render({
                    elem: '#test'
                    //  , url: '/Department/ManageDeptInfo'
            
                    , method: 'POST'
                    , cols: [[
                       { field: 'departmentName',title: '部门名称', width: 200,align:'center', sort: true }
                      , { field: 'departmentCode', title: '部门编号', width: 100, align: 'center', sort: true }
                      , { field: 'code', title: '团队类型', width: 200, align: 'center', sort: true }
                      , { field: 'departmentName', title: '负责人名称', width: 200, align: 'center', sort: true }
                      , { field: 'departmentCode', title: '负责人编号', width: 200, align: 'center', sort: true }
                      , { field: 'code', title: '操作', width: 200, align: 'center', sort: true }
                    ]],
                    data: table_data
                    , page: true
                });
            })

（注意我的数据是提前保存到本地，所以加了data,如果是请求后台直接填写url：'链接地址'）

遇到的坑：

1.数据格式要与layui的数据格式一致，否则会报错。（数据格式点击打开链接）

2.设置样式一定要放到title的后面，否则不起作用

（后续我将总结添加编辑、新增和删除的功能）