SQL左连接字段重复问题：一对多关联下如何避免标题重复展示

嘿，我来帮你搞定这个问题！你现在遇到的是一对多关联查询里的典型场景：每个主表行（annonce）对应多个子表行（pdfannonce），JOIN之后会返回重复的主表字段，而你希望相同标题的行只显示一次基础信息，对应的附件单独列出来。

先修正你原SQL的一个小问题 #

首先要注意WHERE子句的逻辑优先级！你原来的语句里AND和OR的顺序会导致条件不符合预期：

-- 原语句的实际执行逻辑是：
(categorie = "Emplois du temps" AND annonce.destination = "1re Année") OR annonce.destination = "Tous"

这会把所有destination = "Tous"的行都查出来，不管categorie是什么。正确的写法应该把destination的条件用括号括起来：

WHERE categorie = "Emplois du temps" 
  AND (annonce.destination = "1re Année" OR annonce.destination = "Tous")

两种解决方案，按需选择 #

方案1：SQL层面合并附件（适合只需查看所有附件的场景）

如果你只需要每个标题对应一行，把所有附件合并成一个字段，可以用GROUP_CONCAT函数（MySQL支持，其他数据库类似函数比如PostgreSQL的STRING_AGG）：

SELECT 
    annonce.id,
    annonce.titre,
    GROUP_CONCAT(pdfannonce.pdf SEPARATOR ', ') AS pdf_list,
    annonce.destination,
    annonce.categorie
FROM annonce
LEFT JOIN pdfannonce ON annonce.id = pdfannonce.annonce_id
WHERE categorie = "Emplois du temps" 
  AND (annonce.destination = "1re Année" OR annonce.destination = "Tous")
GROUP BY annonce.id, annonce.titre, annonce.destination, annonce.categorie;

这个查询会把同一个annonce下的所有pdf合并成一个逗号分隔的字符串，每个标题只会出现一次，结果类似：

方案2：前端层面分组渲染（实现你要的表格样式）

SQL本身返回的是行级数据，没法直接让后续行的非pdf字段为空。如果想要达到你给出的表格效果（同一标题的后续行只显示pdf），建议在前端处理数据的展示逻辑：

1. 先执行修正后的关联查询（保留所有行）：

SELECT 
    annonce.id,
    annonce.titre,
    pdfannonce.pdf,
    annonce.destination,
    annonce.categorie
FROM annonce
LEFT JOIN pdfannonce ON annonce.id = pdfannonce.annonce_id
WHERE categorie = "Emplois du temps" 
  AND (annonce.destination = "1re Année" OR annonce.destination = "Tous");

2. 在前端对数据进行分组处理，比如用JavaScript：

// 假设从后端拿到的原始数据是rows数组
const groupedByTitre = {};

rows.forEach(row => {
  const key = row.titre;
  if (!groupedByTitre[key]) {
    // 第一个行保存完整信息，同时收集pdf
    groupedByTitre[key] = {
      ...row,
      pdfs: [row.pdf]
    };
  } else {
    // 后续行只添加pdf到数组
    groupedByTitre[key].pdfs.push(row.pdf);
  }
});

// 转换为渲染用的数组
const renderData = [];
Object.values(groupedByTitre).forEach(group => {
  // 第一行渲染所有字段
  renderData.push({
    id: group.id,
    titre: group.titre,
    pdf: group.pdfs[0],
    destination: group.destination,
    categorie: group.categorie
  });
  // 剩下的pdf只渲染pdf字段，其他留空
  group.pdfs.slice(1).forEach(pdf => {
    renderData.push({
      id: '',
      titre: '',
      pdf: pdf,
      destination: '',
      categorie: ''
    });
  });
});

3. 最后用renderData渲染表格，就能得到你想要的样式啦！

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