layui官方文档针对多表头的叙述是静态数据的数据信息3D渲染的，一开始困扰了大半天 ，查了许多 材料 ，总算找到了解决方案，在这儿共享给大伙儿 ，期待能协助到你！
1 、先来看看layui的官方文档
更多级别表头（能够无限极）： <table class="layui-table" lay-data="{url:'/test/table/demo2.json?v=3', cellMinWidth: 80, page: true}"> <thead> <tr> <th lay-data="{field:'username', width:80}" rowspan="3">手机联系人</th> <th lay-data="{field:'amount', width:120}" rowspan="3">额度</th> <th lay-data="{align:'center'}" colspan="5">详细地址1</th> <th lay-data="{align:'center'}" colspan="2">详细地址2</th> <th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#barDemo'}" rowspan="3">实际操作</th> </tr> <tr> <th lay-data="{field:'province'}" rowspan="2">省</th> <th lay-data="{field:'city'}" rowspan="2">市</th> <th lay-data="{align:'center'}" colspan="3">详尽</th> <th lay-data="{field:'province'}" rowspan="2">省</th> <th lay-data="{field:'city'}" rowspan="2">市</th> </tr> <tr> <th lay-data="{field:'street'}" rowspan="2">街道社区</th> <th lay-data="{field:'address'}">住宅小区</th> <th lay-data="{field:'house'}">模块</th> </tr> </thead> </table>
官方文档全是静态数据3D渲染 ，相匹配实际效果以下：
2 、再看一下问提和解决方法
可是大部分状况全是js动态性载入的数据信息,以下：
<script>
layui.use('table', function(){
var table = layui.table;
var options = {
id: 'id',
method: 'GET',
elem: '#id', //特定初始报表原素选择符（强烈推荐id）
url: '../../,
request: {
pageName: 'currentPage', // 页数的主要参数名字，默认设置：page
limitName: 'pageSize' // 每张信息量的主要参数名，默认设置：limit
},
limit: 10,
limits: [10, 15, 30],
page: true,
cols: [[
{field: 'id', title: 'ID', width: 80, sort: true}
,{field: 'username', title: '登录名', width: 120}
,{field: 'email', title: '电子邮箱', minWidth: 150}
,{field: 'sign', title: '签字', minWidth: 160}
,{field: 'sex', title: '性別', width: 80}
,{field: 'city', title: '大城市', width: 100}
,{field: 'experience', title: '積分', width: 80, sort: true}
]]
});
</script>
我逐渐的解决计划方案以下：
<script type="text/javascript">
$(document).ready(function(){
var ht_tr ="<tr><td colspan=\"4\"><div class=\"layui-table-cell laytable-cell-1-0-0\" align=\"left\"><span>XIAOMI</span></div></td>"
"<td colspan=\"4\"><div class=\"layui-table-cell laytable-cell-1-0-0\" align=\"left\"><span>IPHONE</span></div></td></tr>";
setTimeout(function(){
$(".layui-table-header").next().next().append(ht_tr);
},500);
});
</script>
在HTML网页页面中 ，方案着在动态性记在数据信息后 ，动态性延迟时间载入，加上新的一行数据信息做为表头 ，之后发觉这类方式难以实现 ，网页页面沒有3D渲染出去！
3、解决方法以下
配备编码以下：
rowspan：转账 colspan：跨列
cols: [
／／一级表头
[
{ rowspan: 2, title: '手机联系人', field: 'person'},
{ rowspan: 2, title: '详细地址', colspan: 3},
{ rowspan: 2, title: '实际操作', field: 'option'}
],
／／二级表头
[
{ title: '省', field: 'provence'},
{ title: '市', field: 'city'},
{ title: '区', field: 'area'}
]
],
如上编码所显示，在LayUI中操作方法3D渲染繁杂表头时 ，将各个表头各自放到一个二维数组中 ，且依照置放的次序来分辨其等级（一级第一个，二级第二个这些） ，一般来说 ，有多少级深层的表头，那麼在第一级中无子级的就必须有相对的rowspan ，有子级的 ，就需要有相对的colspan 。
