Ant Design Table 默认打开子行

Question

如何渲染嵌套的 ant-design table，子行默认打开？

Answer 1

您可以在 table 道具中使用 expandable 对象的 defaultExpandAllRows 道具。见 documentation供参考。

const { Table } = antd

const App = () => {

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    }
  ]
  
  const data = [
    {
      key: 1,
      name: 'Joe Parent',
      age: 60,
      children: [
        {
          key: 11,
          name: 'John Child',
          age: 42,
          children: [
            {
              key: 111,
              name: 'Lea Grandchild',
              age: 23
            }
          ]
        }
      ]
    } 
  ]
  return (
    <Table
     columns={columns}
     dataSource={data}
      expandable={{
        defaultExpandAllRows: true
        
      }}     
    />
  )
}

ReactDOM.render(<App element=">"/>, document.getElementById('root'))

@import 'https://cdnjs.cloudflare.com/ajax/libs/antd/4.15.0/antd.min.css'

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/4.15.0/antd.min.js"></script>
<div id="root"></div>

Ant Design Table 默认打开子行

Ant Design Table with child rows open by default

reactjs

antd