Angular 8实现表格行点击显示/隐藏及多展开状态保持

核心思路 #

放弃用单个变量记录当前展开行的方式，改用数组存储所有处于展开状态的行ID，通过判断行ID是否在数组中来控制行的显示/隐藏，同时处理点击事件来添加或移除对应ID。

具体实现步骤（以React为例，适配你的项目） #

• 初始化状态：用数组expandedRows存储展开的行ID，初始为空数组

  const [expandedRows, setExpandedRows] = useState([]);
  

• 处理点击事件：
  点击行时，判断当前行ID是否在expandedRows中：
  • 如果存在，移除该ID（折叠行）
  • 如果不存在，添加该ID（展开行）

  const handleRowClick = (rowId) => {
    setExpandedRows(prev => {
      if (prev.includes(rowId)) {
        return prev.filter(id => id !== rowId);
      } else {
        return [...prev, rowId];
      }
    });
  };
  

• 控制行的显示：
  在渲染展开行（详情行）时，判断当前行ID是否在expandedRows数组中，决定是否渲染

  {expandedRows.includes(row.id) && (
    <tr>
      <td colSpan="你的表格列数">
        {/* 展开的内容 */}
      </td>
    </tr>
  )}
  

• 绑定点击事件到触发行：

  <tr onClick={() => handleRowClick(row.id)}>
    {/* 行内容 */}
  </tr>
  

关键说明 #

• 这种方式天然支持多行同时展开，因为数组可以存储多个ID
• 点击已展开的行时，会从数组中移除对应ID，实现折叠效果
• 如果你的项目用的是其他框架（如Vue），逻辑完全一致：用数组维护展开状态，点击时切换ID的存在性，渲染时判断数组是否包含对应ID

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