layui显示订单列表，一个订单有多个商品

如果一个订单有多个商品，您可以在表格中使用嵌套表格来展示订单详情。在 layui 中，可以使用 `subTable` 方法来渲染嵌套表格。以下是示例代码：

layui.use(['table', 'layer'], function(){
  var table = layui.table;
  var layer = layui.layer;
  
  //渲染主表格
  table.render({
    elem: '#orderList',
    url: '/order/getList',
    page: true,
    cols: [[
      {field: 'orderId', title: '订单ID', width: 120, sort: true},
      {field: 'totalAmount', title: '总金额', width: 120},
      {field: 'status', title: '状态', width: 100},
      {field: 'createTime', title: '创建时间', width: 180},
      {field: 'updateTime', title: '更新时间', width: 180},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]],
    done: function(res, curr, count){
      //渲染完毕后，监听子表格数据加载完成事件
      table.on('subTableDone(orderList)', function(obj){
        //调整子表格高度
        obj.elem.height(obj.totalHeight + 20);
      });
    }
  });
  
  //监听工具条
  table.on('tool(orderList)', function(obj){
    var data = obj.data;
    if(obj.event === 'detail'){
      //查看订单详情
      layer.open({
        type: 1,
        title: '订单详情',
        area: ['800px', '600px'],
        content: getOrderDetail(data.orderId)
      });
    } else if(obj.event === 'delete'){
      //删除订单
    } else if(obj.event === 'edit'){
      //编辑订单
    }
  });
  
  //获取指定订单的详情
  function getOrderDetail(orderId){
    var html = '';
    $.ajax({
      url: '/order/getDetail',
      data: {orderId: orderId},
      async: false,
      success: function(res){
        html = '<table class="layui-table" lay-size="sm">' +
                 '<colgroup>' +
                   '<col width="100">' +
                   '<col width="200">' +
                   '<col width="100">' +
                   '<col width="100">' +
                   '<col width="120">' +
                   '<col width="100">' +
                   '<col width="180">' +
                   '<col width="180">' +
                 '</colgroup>' +
                 '<thead><tr><th>商品ID</th><th>商品名称</th><th>单价</th><th>数量</th><th>小计</th><th>状态</th><th>创建时间</th><th>更新时间</th></tr></thead>' +
                 '<tbody>';
        for(var i=0; i<res.length; i++){
          html += '<tr><td>' + res[i].productId + '</td><td>' + res[i].productName + '</td><td>' + res[i].price + '</td><td>' + res[i].quantity + '</td><td>' + res[i].subtotal + '</td><td>' + res[i].status + '</td><td>' + res[i].createTime + '</td><td>' + res[i].updateTime + '</td></tr>';
        }
        html += '</tbody></table>';
      }
    });
    return html;
  }
  
  //渲染子表格
  table.render({
    elem: '#orderList',
    url: '/order/getList',
    page: false,
    cols: [[
      {field: 'productId', title: '商品ID', width: 100},
      {field: 'productName', title: '商品名称', width: 200},
      {field: 'price', title: '单价', width: 100},
      {field: 'quantity', title: '数量', width: 100},
      {field: 'subtotal', title: '小计', width: 120},
      {field: 'status', title: '状态', width: 100},
      {field: 'createTime', title: '创建时间', width: 180},
      {field: 'updateTime', title: '更新时间', width: 180},
    ]],
    id: 'subTable',
    parentId: 'orderId',
    //设置初始子表格高度
    initHeight: 0,
    //设置子表格的数据接口和参数
    subTable: function(res){
      return {
        url: '/order/getDetail',
        where: {
          orderId: res.orderId
        },
        cols: [[
          {field: 'productId', title: '商品ID', width: 100},
          {field: 'productName', title: '商品名称', width: 200},
          {field: 'price', title: '单价', width: 100},
          {field: 'quantity', title: '数量', width: 100},
          {field: 'subtotal', title: '小计', width: 120},
          {field: 'status', title: '状态', width: 100},
          {field: 'createTime', title: '创建时间', width: 180},
          {field: 'updateTime', title: '更新时间', width: 180},
        ]]
      }
    }
  });
  
});

在上述代码中，主表格和子表格的定义均使用 `table.render` 方法。主表格的 `cols` 选项中不包含商品信息，子表格的 `cols` 选项中则包含商品信息。在主表格的 `done` 回调函数中，监听子表格数据加载完成事件，调整子表格的高度，以保证显示完整的数据。在 `subTable` 方法中，您需要设置子表格的数据接口和参数，这里使用 `where` 参数传递订单ID，以获取指定订单的商品信息。

最后，您需要在 HTML 中定义表格和操作按钮的模板：

<table id="orderList" lay-filter="orderList"></table>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>
</script>

注意，子表格的定义需要在主表格的后面。另外，子表格的 `id` 和 `parentId` 属性需要设置为相应的值，以便 layui 自动渲染嵌套表格。