前言

项目进行中，需要在页面绘制一个表格，而我脑子像抽筋似的忘了到底怎么画，以此写下这篇
表格可以更加清晰的把数据展示出来，一目了然
不会说太多废话，开始吧！

代码：

  1. <div id="dataMenu">
  2.   <form id="setDataMenu" class="layui-form layui-form-pane" onsubmit="return false;">
  3.     <div class="layui-collapse">
  4.       <div class="layui-colla-item">
  5.         <h2 class="layui-colla-title">qqqq</h2>
  6.         <div class="layui-colla-content layui-show">
  7.           <table class="layui-table" lay-filter="graphicId">
  8.             <thead>
  9.               <tr>
  10.                 <th lay-data="{field:'id'}">编号</th>
  11.                 <th lay-data="{field:'name'}">名称</th>
  12.                 <th lay-data="{field:'type'}">类型</th>
  13.               </tr>
  14.             </thead>
  15.             <tbody id="data-table"></tbody>
  16.           </table>
  17.         </div>
  18.       </div>
  19.       <div class="layui-colla-item">
  20.         <h2 class="layui-colla-title">xxx</h2>
  21.         <div class="layui-colla-content layui-show">
  22.           <table class="layui-table" lay-filter="parent">
  23.             <thead>
  24.               <tr>
  25.                 <th lay-data="{field:'id', width:80}">编号</th>
  26.                 <th lay-data="{field:'name', width:80, edit: 'text'}">名称</th>
  27.                 <th lay-data="{field:'type', width:80}">类型</th>
  28.               </tr>
  29.             </thead>
  30.             <tbody id="parentTable"></tbody>
  31.           </table>
  32.         </div>
  33.       </div>
  34.       <div class="layui-colla-item">
  35.         <h2 class="layui-colla-title">zzz</h2>
  36.         <div class="layui-colla-content layui-show">
  37.           <table class="layui-table" lay-filter="children">
  38.             <thead>
  39.               <tr>
  40.                 <th lay-data="{field:'id', width:80}">编号</th>
  41.                 <th lay-data="{field:'name', width:80, edit: 'text'}">名称</th>
  42.                 <th lay-data="{field:'type', width:80}">类型</th>
  43.               </tr>
  44.             </thead>
  45.             <tbody id="childrenTable"></tbody>
  46.           </table>
  47.         </div>
  48.       </div>
  49.     </div>
  50.   </form>
  51. </div>

知识点：

layui-form layui-form-pane
layui-collapse
layui-colla-item
layui-colla-title
layui-colla-content layui-show
lay-filter=”graphicId”

效果：

表格 - 图1
参考文档：https://www.layui.com/doc/modules/table.html
https://www.layui.com/doc/element/table.html