🌳 树形数据导出

使用 export_data() 将嵌套的 children 结构递归拍平后导出,支持层级缩进

💡 适用场景: 组织架构、商品分类、菜单目录等具有父子关系的数据。 通过 indent_columnchildren_key 参数控制缩进与子节点字段。

场景1: 组织架构导出

典型的树形数据——公司组织架构,使用 children 表示上下级关系:

const orgData = [
    {
        id: 1, name: 'CEO - 张三', title: 'CEO', level: '高管',
        children: [
            {
                id: 2, name: 'CTO - 李四', title: 'CTO', level: '高管',
                children: [
                    { id: 5, name: '前端组长 - 王五', title: '组长', level: '中层' },
                    { id: 6, name: '后端组长 - 赵六', title: '组长', level: '中层' },
                ]
            },
            { id: 3, name: 'CFO - 孙七', title: 'CFO', level: '高管', children: [...] },
            { id: 4, name: 'COO - 吴九', title: 'COO', level: '高管' },
        ]
    }
];

const columns = [
    { title: 'ID', key: 'id' },
    { title: '姓名', key: 'name' },
    { title: '职位', key: 'title' },
    { title: '层级', key: 'level' },
];

// 普通导出
export_data(orgData, { columns, filename: '组织架构.xlsx', format: ExportFormat.Xlsx });

// 带缩进导出(indentColumn + childrenKey)
export_data(orgData, {
    columns,
    filename: '组织架构_缩进.xlsx',
    format: ExportFormat.Xlsx,
    indentColumn: 'name',
    childrenKey: 'children',
});

场景2: 商品分类目录

电商常见的多级分类树,支持自定义子节点字段名(如 subCategories):

const categoryData = [
    {
        id: 1, name: '电子产品', code: 'ELEC',
        subCategories: [
            { id: 2, name: '手机', code: 'PHONE',
              subCategories: [
                  { id: 5, name: '智能手机', code: 'SMART' },
                  { id: 6, name: '功能手机', code: 'FEATURE' },
              ] },
            { id: 3, name: '电脑', code: 'PC', subCategories: [...] },
        ]
    },
    { id: 4, name: '服装', code: 'CLOTH', subCategories: [...] },
];

const columns = [
    { title: 'ID', key: 'id' },
    { title: '分类名称', key: 'name' },
    { title: '编码', key: 'code' },
];

// 自定义 childrenKey 为 'subCategories'
export_data(categoryData, {
    columns,
    filename: '商品分类.xlsx',
    format: ExportFormat.Xlsx,
    indentColumn: 'name',
    childrenKey: 'subCategories',
});

场景3: 嵌套表头 + 树形数据

表头配置为多层嵌套结构(分组列),数据也是树形结构。表头嵌套控制列的分组合并,数据嵌套控制行的层级拍平:

const nestedColumns = [
    { title: '部门', key: 'dept' },
    { title: '详情', children: [
        { title: '负责人', key: 'leader' },
        { title: '人数', key: 'count' },
    ]},
];

const deptTreeData = [
    {
        dept: '技术部', leader: '张三', count: 100,
        children: [
            { dept: '前端组', leader: '李四', count: 30 },
            { dept: '后端组', leader: '王五', count: 70,
              children: [
                  { dept: '数据库组', leader: '赵六', count: 20 },
              ] },
        ]
    },
];

// 导出效果(Excel 中):
// | 部门     |    详情        |
// |          | 负责人 |  人数  |
// |   技术部  |  张三  |  100  |
// |   ├ 前端组|  李四  |   30  |

export_data(deptTreeData, {
    columns: nestedColumns,
    filename: '部门架构.xlsx',
    format: ExportFormat.Xlsx,
    indentColumn: 'dept',
    childrenKey: 'children',
});

场景4: 大数据量树形结构

动态生成包含数百个节点的树形数据,测试性能:

// 动态生成 5^4 = 625 个叶子节点的树
const data = generateLargeTree(4, 5);

const columns = [
    { title: 'ID', key: 'id' },
    { title: '名称', key: 'name' },
    { title: '值', key: 'value' },
    { title: '状态', key: 'status' },
];

export_data(data, {
    columns,
    filename: '大数据量树.xlsx',
    format: ExportFormat.Xlsx,
    indentColumn: 'name',
    childrenKey: 'children',
});

💡 树形导出 API

// 树形导出使用 options 对象传参
export_data(data, {
    columns,           // 表头配置
    filename,          // 文件名
    format,            // ExportFormat.Csv | ExportFormat.Xlsx
    progressCallback,  // 进度回调(可选)
    indentColumn,      // 需要缩进的列 key(如 'name')
    childrenKey,       // 子节点字段名(如 'children')
});

// 示例:自定义 childrenKey
export_data(categoryData, {
    columns,
    filename: '分类.xlsx',
    format: ExportFormat.Xlsx,
    indentColumn: 'name',
    childrenKey: 'subCategories',
});