基于条件展示数据：实现类Excel数据透视表功能遇关联数据问题

看起来你现在卡在了从JSON数据构建关联透视表的环节，先帮你理清楚现有代码的问题，再给你重构后的可行方案：

现有代码的核心问题 #

1. 对象重复判断完全失效：this.jsonObj.indexOf(item) == -1这个判断根本起不到去重作用——每次循环创建的item都是新的对象引用，哪怕内容完全一致，indexOf也找不到匹配项，会导致数组里塞满重复对象。
2. 缺失关联筛选逻辑：当前代码只是机械地把每个pivotItems的属性封装成对象，完全没处理「选择EmployeeId时，只展示已选EmployeeName对应Id」这个核心需求。

重构后的实现方案 #

我们可以拆分逻辑，先区分用户当前选择的字段（EmployeeName/EmployeeId），再针对性处理数据：

第一步：新增状态记录已选EmployeeName #

首先在组件里加一个状态，用来存用户选中的员工姓名集合：

selectedEmployeeNames: Set<string> = new Set();

当用户在界面上选择EmployeeName选项时，把选中项添加到这个Set里即可。

第二步：重写createJSON函数 #

createJSON(e: any, attributeData: string[]) {
  this.jsonObj = [];
  const targetField = e.dragData; // 假设这是用户选择的目标字段：EmployeeName或EmployeeId

  if (targetField === 'EmployeeName') {
    // 需求：展示所有唯一的EmployeeName
    const uniqueNames = new Set<string>();
    this.pivotItems.forEach(item => {
      if (item.EmployeeName) uniqueNames.add(item.EmployeeName);
    });
    // 转换成表格需要的结构
    this.jsonObj = Array.from(uniqueNames).map(name => ({ EmployeeName: name }));
  } else if (targetField === 'EmployeeId') {
    // 需求：展示与已选EmployeeName关联的EmployeeId
    if (this.selectedEmployeeNames.size === 0) {
      console.warn('请先选择EmployeeName');
      return;
    }
    // 过滤出匹配已选姓名的项，提取唯一Id
    const relatedIds = new Set<string>();
    this.pivotItems.forEach(item => {
      if (this.selectedEmployeeNames.has(item.EmployeeName) && item.EmployeeId) {
        relatedIds.add(item.EmployeeId);
      }
    });
    this.jsonObj = Array.from(relatedIds).map(id => ({ EmployeeId: id }));
  } else {
    // 兼容其他字段的通用去重逻辑
    const uniqueValues = new Map<string, any>();
    this.pivotItems.forEach(item => {
      const key = item[targetField];
      if (key && !uniqueValues.has(key)) {
        uniqueValues.set(key, { [targetField]: key });
      }
    });
    this.jsonObj = Array.from(uniqueValues.values());
  }

  console.log('处理后的透视数据:', this.jsonObj);
}

代码逻辑解释 #

1. 分场景处理：根据用户选择的目标字段，执行对应的数据处理逻辑，清晰直白
2. 用Set高效去重：不管是姓名还是ID，都用Set确保唯一性，避免重复数据
3. 关联筛选核心逻辑：选择EmployeeId时，通过selectedEmployeeNames过滤原数据，只保留匹配项的ID
4. 可扩展性强：后续要加其他字段的透视逻辑，直接在else分支里补充即可

额外优化建议 #

• 如果数据量较大，可以提前把原数据按EmployeeName分组，比如用Map<string, string[]>存储{ 员工姓名: [对应ID1, 对应ID2...] }，后续查询关联ID时会更快
• 可以给表格加空状态提示，比如没选EmployeeName时，显示「请先选择员工姓名」引导用户操作

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