# table多级表头(多表头)

An image

//将表生成[表.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