本文共 3682 字，大约阅读时间需要 12 分钟。

Layui表格模块基础配置与使用指南

Layui 的表格模块在前一代表格组件的基础上，提供了更加友好的基础配置方式。其核心目标是实现功能性与简洁性之间的平衡，即在保证核心功能的前提下，避免过于复杂的配置参数，从而降低开发门槛。

1. 基础配置参数

默认情况下，lay-data 属性中的内容即为基础配置参数值，值需用单引号包裹。

基于 table.render() 方法的基础配置方式：

table.render({  height: 300,  url: '/api/data'});

还可以通过 table.init() 方法传递配置对象：

table.init('filter', {  height: 300,  url: '/api/data'});// 首次渲染var tableObj = table.render();// 更新配置并重新渲染tableObj.reload(newOptions);

2. 表头配置说明

表头的设置支持多种参数，具体实现方式如下：

2.1 绑定原始表格元素

针对 table.render() 渲染方式，只需指定原始表格容器即可：

table.render({  elem: '#test'});

2.2 设置表头布局及内容

表头的布局和内容可通过 cols 参数指定，具体配置方式如下：

table.render({  cols: [    { checkbox: true }, // 初始化复选框    { field: 'id', title: 'ID', width: 80 },    { field: 'username', title: '用户名', width: 120 }  ]});

此时对应的表格 HTML 结构将自动生成如下所示：

2.3 支持联级表头

通过设置 rowspan 和 colspan//-------------------------------------------------------------------------------------------------------------------

table.render({  cols: [    {      field: 'username',      title: '联系人',      width: 80,      rowspan: 2    },    {      field: 'amount',      title: '金额',      width: 120,      rowspan: 2    },    {      align: 'center',      title: '地址',      colspan: 3    },    {      field: 'province',      title: '省',      width: 80    },    {      field: 'city',      title: '市',      width: 120    },    {      field: 'county',      title: '详细',      width: 300    }  ]});

渲染结果将为：

      联系人    金额    地址        省    市    详细  

3. 表头参数具体说明

3.1 field（字段设置）

通过 field 参数指定字段名称，用于与数据源对应：

table.render({  cols: [    { field: 'id' },    { field: 'username' }  ]});

3.2 title（标题设置）

通过 title 参数指定单元格显示的标题文本：

table.render({  cols: [    { title: '邮箱' },    { title: '签名' }  ]});

3.3 width（列宽设置）

指定单元格的宽度，适用于普通字段：

table.render({  cols: [    { width: 80 },    { width: 120 }  ]});

3.4 checkbox（初始化复选框）

通过 checkbox 参数设置表头内的复选框：

table.render({  cols: [    { checkbox: true },    { field: 'id', title: 'ID', width: 100 }  ]});

若需要默认全部选中，可结合 LAY_CHECKED 参数：

table.render({  cols: [    { checkbox: true, LAY_CHECKED: true },    { field: 'id', title: 'ID', width: 100 }  ]});

3.5 space（空隙列）

通过 space 参数定义一个有空隙的列，适用于需要辅助对齐的场景：

table.render({  cols: [    { space: true },    { field: 'id', title: 'ID', width: 100 }  ]});

3.6 sort（排序功能）

通过 sort 参数开启排序功能，需确保数据字段类型与排序方式匹配：

table.render({  cols: [    { sort: true },    { field: 'id', title: 'ID', width: 100 }  ]});

3.7 fixed（固定列）

通过 fixed 参数定义固定列，支持 true 或 'right':

table.render({  cols: [    { fixed: true },    { field: 'username', title: '姓名', width: 120, fixed: 'right' }  ]});

4. 进阶功能扩展

4.1 单元格模板

通过 templet 参数自定义单元格内容，可实现表单、链接等功能：

table.render({  cols: [    {      field: 'title',      title: '文章标题',      width: 200,      templet: '#titleTpl'    },    {      field: 'id',      title: 'ID',      width: 100    }  ]});

若模板内容为 HTML 标签，需使用 laytpl 引擎：

table.render({  cols: [    {      field: 'title',      title: '文章标题',      width: 200,      templet: '#contentTpl'    },    {      field: 'id',      title: 'ID',      width: 100    }  ]});

4.2 工具条功能

通过 toolbar 参数绑定工具条，支持查看、编辑、删除等操作：

table.render({  cols: [    {      field: 'id',      title: 'ID',      width: 100,      toolbar: '#barDemo'    }  ]});

工具条模板示例：

5. 工具条事件监听

根据工具条事件名，实现不同操作功能：

table.on('tool(test)', function(obj) {  var data = obj.data;  var layEvent = obj.event;  var tr = obj.tr;    if(layEvent === 'detail') {    // 查看操作  } else if(layEvent === 'del') {    // 删除操作    layer.confirm('真的删除此行吗', function(index) {      obj.del();      layer.close(index);    });  } else if(layEvent === 'edit') {    // 编辑操作    obj.update({      username: '修改后的内容'    });  }});

通过 Layui 表格模块，可以轻松实现表格高度自定义化，适用于复杂数据展示和操作需求场景。