antd 表格展开默认展开第一条

要设置 Ant Design 表格默认展开第一条记录，可以使用 `defaultExpandAllRows` 和 `expandedRowRender` 属性。

首先，在表格组件中设置 `defaultExpandAllRows={true}`，这将默认展开所有行。

然后，定义一个函数用于渲染展开的行，例如：

const expandedRowRender = (record) => {
  return (
    <p>{record.description}</p>
  );
};

这个函数接收每行的数据作为参数，并返回一个 React 组件来渲染展开的行。在这个例子中，我们只是简单地展示了一段描述文字。

最后，在表格组件中设置 `expandedRowRender={expandedRowRender}`，这将把我们定义的渲染函数应用到所有需要展开的行上。

完整的代码示例如下：

import { Table } from 'antd';

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
  },
];

const expandedRowRender = (record) => {
  return (
    <p>{record.description}</p>
  );
};

const App = () => {
  return (
    <Table
      dataSource={data}
      columns={[
        { title: 'Name', dataIndex: 'name', key: 'name' },
        { title: 'Age', dataIndex: 'age', key: 'age' },
      ]}
      defaultExpandAllRows={true}
      expandedRowRender={expandedRowRender}
    />
  );
};

export default App;