是否有算法或预定义函数为Fluent UI GroupedList处理CSV数据生成三级分组？

现成工具与快速实现方式 #

没有完全开箱即用、仅需指定列名的专属工具，但可以通过成熟工具库快速组合实现：

• 用lodash的groupBy方法配合递归逻辑，几行代码就能完成多级分组转换，是最常用的方案。
• 社区也有针对Fluent UI GroupedList的轻量封装函数，核心逻辑都是基于多级分组的递归转换。

自定义实现（直接可用） #

如果不想依赖额外库，自己编写转换函数也非常简单，以下是针对三级分组的完整实现：

前提：CSV数据已解析为对象数组 #

假设你的CSV数据已经处理成如下格式：

const parsedCsvData = [
  { category: '电子', subCategory: '手机', brand: '苹果', product: 'iPhone 15' },
  { category: '电子', subCategory: '手机', brand: '三星', product: 'S24' },
  { category: '电子', subCategory: '电脑', brand: '联想', product: '拯救者' },
  { category: '服饰', subCategory: '上衣', brand: '优衣库', product: '纯棉T恤' }
];

转换函数实现 #

// 手动实现groupBy（替代lodash）
function groupBy(arr, key) {
  return arr.reduce((result, item) => {
    const groupKey = item[key];
    if (!result[groupKey]) result[groupKey] = [];
    result[groupKey].push(item);
    return result;
  }, {});
}

// 生成GroupedList所需的三级分组结构
function generateThreeLevelGroups(data, [level1Col, level2Col, level3Col]) {
  // 递归构建分组
  const buildGroups = (items, columns) => {
    if (columns.length === 0) return items;
    const currentCol = columns[0];
    const grouped = groupBy(items, currentCol);
    
    return Object.entries(grouped).map(([key, children]) => ({
      key: `${currentCol}-${key}`,
      name: key,
      children: buildGroups(children, columns.slice(1))
    }));
  };

  return buildGroups(data, [level1Col, level2Col, level3Col]);
}

// 使用示例：传入解析后的CSV数据和三级列名
const groupedListData = generateThreeLevelGroups(parsedCsvData, ['category', 'subCategory', 'brand']);

结构适配说明 #

上述函数生成的结果完全符合Fluent UI GroupedList的要求：每个分组对象包含key（唯一标识）、name（分组显示名称）、children（子分组或最终数据项），可直接传入组件的groups属性。

注意事项 #

• 确保原始CSV数据已经按你的自定义排序规则处理完毕，分组后的层级顺序会保留原数据的排序。
• 若列值存在空值或undefined，建议提前过滤或设置默认分组名称，避免生成无效分组。

内容的提问来源于stack exchange，提问作者Teja Puvvula