Ant Design Table组件：如何在数据加载时展开指定行

要实现Table组件加载时自动展开name为'B'的行，核心是利用Ant Design Table的expandable配置项中的expandedRowKeys属性，通过指定目标行的key来控制展开状态。

函数组件实现示例 #

import { Table } from 'antd';
import { useState } from 'react';

// 数据源
const tableSourceData = [
  { key: 1, name: "A" },
  { key: 2, name: "B" }
];

const MyTable = () => {
  // 初始化展开行的key数组，定位到name为'B'的行
  const [expandedRowKeys] = useState(() => {
    const targetRow = tableSourceData.find(row => row.name === 'B');
    return targetRow ? [targetRow.key] : [];
  });

  return (
    <Table
      dataSource={tableSourceData}
      columns={[{ title: '名称', dataIndex: 'name', key: 'name' }]}
      expandable={{
        expandIcon: () => <div />,
        expandedRowKeys,
        // 可选：支持手动切换展开/收起时添加此回调
        onExpandedRowsChange: (keys) => console.log(keys)
      }}
    />
  );
};

export default MyTable;

类组件实现示例 #

import { Table } from 'antd';
import React from 'react';

const tableSourceData = [
  { key: 1, name: "A" },
  { key: 2, name: "B" }
];

class MyTable extends React.Component {
  state = {
    expandedRowKeys: []
  };

  componentDidMount() {
    // 组件加载完成后，找到目标行并设置展开状态
    const targetRow = tableSourceData.find(row => row.name === 'B');
    if (targetRow) {
      this.setState({ expandedRowKeys: [targetRow.key] });
    }
  }

  render() {
    return (
      <Table
        dataSource={tableSourceData}
        columns={[{ title: '名称', dataIndex: 'name', key: 'name' }]}
        expandable={{
          expandIcon: () => <div />,
          expandedRowKeys: this.state.expandedRowKeys,
          onExpandedRowsChange: (keys) => this.setState({ expandedRowKeys: keys })
        }}
      />
    );
  }
}

export default MyTable;

关键说明 #

• expandedRowKeys是控制展开行的核心属性，接收一个行key的数组，数组中的key对应的行会自动展开。
• 初始化时通过find方法从数据源中匹配name为'B'的行，提取其key作为初始值，实现加载时自动展开。
• 如果需要允许用户手动切换展开/收起状态，添加onExpandedRowsChange回调来更新状态即可。

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