table多级表头

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3代码
//可以多options.js中把columns复制过来修改
const onInit=($vm)=> {
     gridRef=$vm;
      //设置二级表头
      //清空原表配置
      columns.splice(0);
      //设置二级表头
      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}
                ]
            }
        ]
      );
 }
Last Updated 2025/5/16 03:46:13
ON THIS PAGE