使用 export_data() 将嵌套的 children 结构递归拍平后导出,支持层级缩进
典型的树形数据——公司组织架构,使用 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', });
电商常见的多级分类树,支持自定义子节点字段名(如 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', });
表头配置为多层嵌套结构(分组列),数据也是树形结构。表头嵌套控制列的分组合并,数据嵌套控制行的层级拍平:
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', });
动态生成包含数百个节点的树形数据,测试性能:
// 动态生成 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', });
// 树形导出使用 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', });