如何用HTML/CSS/Angular实现垂直对比表格适配后端数据

不需要改后端原有接口逻辑，前端做一次简单的数据转置就能实现你要的效果，步骤如下：

核心实现思路 #

常规后端返回的用户数据一般是按用户维度组织的水平结构，你只需要在前端把数据从「按用户分组」转成「按字段分组」的垂直结构，就能直接用普通表格组件渲染，不需要找特殊的垂直表格组件。

假设后端返回的原始数据如下：

// 后端常规返回的待对比用户数据
const rawUserList = [
  { userId: "User1", name: "Mark", lastName: "tommy", age: 13 },
  { userId: "User2", name: "Marke", lastName: "Tommi", age: 25 }
]

// 自定义配置需要展示的对比字段，key对应数据字段名，label对应表格第一列显示的字段名
const compareFields = [
  { key: "name", label: "Name" },
  { key: "lastName", label: "lastName" },
  { key: "age", label: "Age" }
]

写一个简单的转置函数处理数据：

/**
 * 把水平结构的用户数据转成垂直表格需要的结构
 * @param {Array} userList 待对比用户列表
 * @param {Array} fields 要对比的字段配置
 * @returns 适配垂直表格的二维数组数据
 */
function transposeTableData(userList, fields) {
  // 组装表头：第一列固定为Info，后续依次排列待对比用户
  const header = ["Info", ...userList.map(u => u.userId)]
  // 组装内容行：每个字段对应一行，依次填入字段名、各用户对应字段的值
  const rows = fields.map(field => {
    return [
      field.label,
      ...userList.map(u => u[field.key])
    ]
  })
  return { header, rows }
}

// 处理后的数据直接传给普通表格组件渲染即可
const verticalTableData = transposeTableData(rawUserList, compareFields)

样式与体验优化 #

• 对齐规则和你给出的示例保持一致即可：第一列（Info列）左对齐，后续用户列可按需求设置居中/右对齐
• 增加差异高亮：渲染单元格时判断同一行内不同用户的值是否相等，值不相等时给单元格加浅红/浅黄背景，核对信息时能直接定位差异项，不用逐行比对
• 如果需要支持超过2个用户的对比场景，这套逻辑完全通用，只需要往rawUserList里加新的用户数据就行，不用改转置逻辑

可选后端直出方案 #

如果不想在前端做数据转置，后端可以直接按下面的结构返回数据，渲染端拿到就能直接用，逻辑和前端转置完全一致：

{
  "header": ["Info", "User1", "User2"],
  "rows": [
    ["Name", "Mark", "Marke"],
    ["lastName", "tommy", "Tommi"],
    ["Age", 13, 25]
  ]
}

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