使用layui 渲染table数据表格的实例代码

使用layui来渲染table数据表格，需要以下几个步骤：

1. 引入layui库和相关样式

在标签中引入layui库和相应的样式：

<link rel="stylesheet" href="layui/css/layui.css">
<script src="layui/layui.all.js"></script>

1. 构造数据

在JavaScript中构造需要渲染的数据，可以使用JSON格式的数据，例如：

var data = [
  {id:1, name:'小明', age:18},
  {id:2, name:'小红', age:19},
  {id:3, name:'小刚', age:20},
  {id:4, name:'小李', age:21},
];

1. 使用layui渲染数据表格

使用layui的table模块来渲染数据表格。具体代码如下：

// 基本用法
layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#demo', // 表格容器ID
    data: data, // 数据源
    cols: [[ // 表头
      {field: 'id', title: 'ID'},
      {field: 'name', title: '姓名'},
      {field: 'age', title: '年龄'}
    ]]
  });
});

其中，elem表示表格容器的ID，data表示数据源，cols表示表格的列和表头信息。这里的cols的设置相当于设置了一个三列的表格，每列的标题和对应的数据字段分别为‘ID’、‘姓名’、‘年龄’。

在完整的代码中，还可以设置表格每行的分页、排序、宽度、高度等信息，例如：

// 分页
table.render({
  elem: '#demo',
  data: data,
  cols: [[
    {field: 'id', title: 'ID'},
    {field: 'name', title: '姓名'},
    {field: 'age', title: '年龄'}
  ]],
  page: true // 开启分页
});

// 排序
table.render({
  elem: '#demo',
  data: data,
  cols: [[
    {field: 'id', title: 'ID', sort: true}, // 启用排序
    {field: 'name', title: '姓名'},
    {field: 'age', title: '年龄'}
  ]]
});

// 固定列宽度和高度
table.render({
  elem: '#demo',
  data: data,
  cols: [[
    {field: 'id', title: 'ID', width: 120},
    {field: 'name', title: '姓名', width: 120},
    {field: 'age', title: '年龄', width: 120}
  ]],
  height: 400 // 设置表格高度
});

以上三个示例分别演示了使用layui渲染带分页、排序、固定列宽度、高度的数据表格的方法。