如何使用两列作为表格分组表头实现按用户ID、用户名排序？

实现方案 #

1. 数据预处理 #

先把你提供的扁平JSON数据按userId + userName做联合分组，把同一用户的所有stats值归集到同一分组下，分组代码参考：

const rawData = [
  {
    "userId": "0001",
    "userName": "UserNr1",
    "stats": "33"
  },
  {
    "userId": "0001",
    "userName": "UserNr1",
    "stats": "22"
  },
  {
    "userId": "0002",
    "userName": "UserNr2",
    "stats": "12"
  },
  {
    "userId": "0002",
    "userName": "UserNr2",
    "stats": "20"
  },
]

// 分组逻辑
const groupedData = Object.values(
  rawData.reduce((prev, curr) => {
    const groupKey = `${curr.userId}-${curr.userName}`
    if (!prev[groupKey]) {
      prev[groupKey] = {
        userId: curr.userId,
        userName: curr.userName,
        statsList: []
      }
    }
    prev[groupKey].statsList.push(curr.stats)
    return prev
  }, {})
)

处理后的groupedData结构如下：

[
  {
    userId: "0001",
    userName: "UserNr1",
    statsList: ["33", "22"]
  },
  {
    userId: "0002",
    userName: "UserNr2",
    statsList: ["12", "20"]
  }
]

2. 表格渲染 #

遍历处理好的分组数据生成表格行：

• 每个分组生成1 + 分组内stats数量行
• 分组首行：user ID列填用户ID，User Name列填用户名加>符号，Stats列留空
• 分组后续的每行：前两列留空，依次填入statsList中的每个值
  如果需要实现折叠展开效果，可以给User Name列添加点击事件，控制当前分组的stats行是否显示即可。

3. 排序实现 #

支持按user ID和User Name排序直接操作groupedData数组即可：

// 按user ID升序排序
groupedData.sort((a, b) => a.userId.localeCompare(b.userId))

// 按User Name升序排序
groupedData.sort((a, b) => a.userName.localeCompare(b.userName))

排序完成后重新渲染表格即可生效。如果使用Element UI、Ant Design等常见UI组件库，也可以直接使用组件库自带的分组表格/树形表格能力，把处理后的groupedData按照组件要求的格式传入即可，无需手动实现渲染逻辑。

内容的提问来源于stack exchange，提问作者Alessio Vaccai