layui 复杂表头的数据表格

html

<table class="layui-table" id="demo"></table>

js

var data = [{
	type: "类型1",
	year1: '10000',
	year2: '10000',
	year3: '10000',
	year4: '10000',
	year5: '10000',
	year6: '10000',
},{
	type: "类型2",
	year1: '10000',
	year2: '10000',
	year3: '10000',
	year4: '10000',
	year5: '10000',
	year6: '10000',
},{
	type: "类型3",
	year1: '10000',
	year2: '10000',
	year3: '10000',
	year4: '10000',
	year5: '10000',
	year6: '10000',
},{
	type: "类型4",
	year1: '10000',
	year2: '10000',
	year3: '10000',
	year4: '10000',
	year5: '10000',
	year6: '10000',
}];
//rowspan跨行，colspan：跨列
table.render({
	elem: '#demo',
	limit: 10,
	page:true,
	data: data,
	cellMinWidth:100,
	cols:  [[
		{field: 'type', title: '', rowspan: 2},
		{field: 'typeB', title: '标题B', colspan: 2,align:'center'},
		{field: 'typeC', title: '标题C', colspan: 2,align:'center'},
		{field: 'typeD', title: '标题D', colspan: 2,align:'center'},
	],[
	    {field: 'year1', title: '2018-06'},
	    {field: 'year2', title: '2018-12'},
		{field: 'year3', title: '2019-06'},
		{field: 'year4', title: '2019-12'},
		{field: 'year5', title: '2020-06'},
		{field: 'year6', title: '2020-12'},
	]],
});