# table多级表头(多表头)
//将表生成[表.vue]文件中的columns文件复制过来,按下面的格式配置下即可
onInit(){
//设置二级表头
//清空原表配置
this.columns.splice(0);
//设置二级表头
this.columns.push(
...[
{
field: '基础信息', title: '基础信息', type: 'string', align: 'center',
children: [
{ field: 'OrderNo', title: '订单编号', type: 'string', link: true, width: 130},
{ field: 'TotalPrice', title: '总价', type: 'decimal', width: 70, align: 'left' },
{ field: 'TotalQty', title: '总数量', type: 'int', width: 80, align: 'left' },
{ field: 'OrderDate', title: '订单日期', type: 'date',width: 95,sort: true}
]
},
{
field: '状态',
title: '状态',
type: 'string',
align: 'center',
children: [
{field: 'OrderType', title: '订单类型', bind: { key: '订单状态', data: [] }, width: 90 },
{field: 'OrderStatus', title: '订单状态', ,bind: { key: '订单状态', data: [] }, width: 90,},
{field: 'AuditStatus', title: '审核状态', type: 'int', bind: { key: 'audit', data: [] }, width: 80}
]
},
{
field: '创建人信息',
title: '创建人信息',
type: 'string',
align: 'center',
children: [
{ field: 'CreateDate', title: '创建时间', type: 'datetime', width: 120, sortable: true},
{ field: 'Creator',title: '创建人', type: 'string', width: 80}
]
},
{
field: '修改人信息',
title: '修改人信息',
type: 'string',
align: 'center',
children: [
{field: 'Modifier', title: '修 改 人', type: 'string', width: 80,align: 'left' },
{field: 'ModifyDate', title: '修改时间', type: 'datetime', width: 150,sortable: true }
]
}
]
);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
← table在线表格编辑 table显示合计 →