嘿，刚好你已经用到了onExpand函数，咱们可以通过数据驱动的状态管理或者直接操作DOM两种方式来实现这个需求，下面给你详细拆解：

方案一：推荐用状态管理（React数据驱动最佳实践） #

这种方式更符合React的设计理念，避免直接操作DOM带来的潜在问题：

1. 定义状态记录展开的行
   在你的组件里添加一个状态，用来存所有展开行的唯一标识（比如id，要和Table的rowKey对应）：

   import { useState } from 'react';
   import { Table } from 'antd';
   
   const YourComponent = () => {
     // 初始化展开行数组为空
     const [expandedRowKeys, setExpandedRowKeys] = useState([]);
     // ...其他状态和逻辑
   };
   

2. 更新onExpand函数维护状态
   在你已有的onExpand里，根据展开/收起动作更新状态数组：

   const handleExpand = (expanded, record) => {
     if (expanded) {
       // 展开时把当前行的key加入数组
       setExpandedRowKeys(prev => [...prev, record.id]);
     } else {
       // 收起时从数组里移除当前行的key
       setExpandedRowKeys(prev => prev.filter(key => key !== record.id));
     }
   };
   

3. 通过rowClassName动态添加样式类
   给Table配置rowClassName属性，根据当前行是否在展开数组里，决定是否添加自定义类：

   <Table
     columns={yourColumns}
     dataSource={yourDataSource}
     onExpand={handleExpand}
     rowKey="id" // 这里要和你用的行唯一标识字段对应
     rowClassName={(record) => 
       expandedRowKeys.includes(record.id) ? 'expanded-parent-row' : ''
     }
     // 其他Table配置...
   />
   

4. 添加自定义CSS样式
   在你的样式文件里定义这个类的样式，比如修改背景色：

   .expanded-parent-row {
     background-color: #f0f7ff; /* 淡蓝色背景，你可以换成任意颜色 */
     /* 还可以加其他样式，比如边框、字体颜色等 */
   }
   

方案二：直接操作DOM（应急快速实现） #

如果不想加状态，也可以在onExpand里直接操作DOM元素，但这种方式不推荐在复杂组件里用，因为可能和React的渲染流程冲突：

const handleExpand = (expanded, record, e) => {
  // 找到当前父行的DOM元素，AntD Table的行默认有ant-table-row类
  const parentRow = e.target.closest('.ant-table-row');
  if (parentRow) {
    if (expanded) {
      parentRow.classList.add('expanded-parent-row');
    } else {
      parentRow.classList.remove('expanded-parent-row');
    }
  }
};

同样需要添加上面的CSS样式。

注意事项 #

• 确保你的Table配置了正确的rowKey，不然状态匹配会出问题；
• 如果样式不生效，检查CSS选择器的优先级，必要时可以用更具体的选择器（比如.ant-table-tbody > .expanded-parent-row）或者加!important；
• 如果是带分页的Table，切换分页后状态会重置，这时候需要结合分页状态来维护expandedRowKeys。

内容的提问来源于stack exchange，提问作者Maria Jeysingh Anbu