layui table 值显示分组中的第一行，点击后展开

要实现这个功能，你可以使用 layui 的表格组件提供的 tree 模式来实现。具体步骤如下：

1. 在表格渲染时，设置 table 的 tree 参数为 true，表示启用树形表格模式。

layui.table.render({
  elem: '#table',
  url: '/api/data',
  tree: true, // 设置为树形表格模式
  cols: [
    // 表格列配置
  ]
});

2. 在表格列配置中，设置第一列的 templet 参数为一个自定义的模板函数，用于渲染单元格的内容。

layui.table.render({
  elem: '#table',
  url: '/api/data',
  tree: true, // 设置为树形表格模式
  cols: [
    { field: 'name', title: '名称', templet: '#nameTpl' },
    // 其他列配置
  ]
});

3. 在 HTML 页面中，定义一个隐藏的模板元素，用于渲染第一列单元格的内容。该模板元素中的内容是一个按钮，用于展开/收起分组。

<script type="text/html" id="nameTpl">
  {{# if(d.parentId === '0') { }} <!-- 如果是分组的第一行 -->
    <button class="layui-btn layui-btn-xs" lay-event="detail">
      <i class="layui-icon layui-icon-down"></i>
      {{ d.name }}
    </button>
  {{# } else { }} <!-- 如果不是分组的第一行 -->
    {{ d.name }}
  {{# } }}
</script>

4. 在 JavaScript 中，监听表格的行单击事件，当用户点击某个分组的第一行时，展开该分组。

layui.table.on('tool(table)', function(obj) {
  var data = obj.data;
  if (obj.event === 'detail' && data.parentId === '0') { // 如果是分组的第一行
    layui.table.treeToggle(this.index, data); // 展开分组
  }
});

这样，当用户点击某个分组的第一行时，该分组会展开，显示所有子行。点击第一行时的按钮，可以将分组收起。