要解决 antd 树状表格默认情况下无法展开行的问题,可以通过设置 defaultExpandAllRows
属性为 true
来实现默认展开所有行。
以下是一个示例代码:
import React from 'react';
import { Table } from 'antd';
const dataSource = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: '11',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '12',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
],
},
{
key: '2',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 3 Lake Park',
children: [
{
key: '31',
name: 'Tom Green',
age: 42,
address: 'London No. 3 Lake Park',
},
],
},
];
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
];
const TreeTable = () => {
return (
);
};
export default TreeTable;
在上面的代码中,defaultExpandAllRows
属性被设置为 true
,这样树状表格在默认情况下会展开所有行。
注意:defaultExpandAllRows
只能在初始化时设置,如果需要动态控制展开行,可以使用 expandedRowKeys
属性和 onExpand
事件来实现。