Ant Design Pro可以通过Table组件实现多层嵌套表格和可编辑表格。具体实现方法如下:
在columns里面嵌套columns即可实现多层嵌套表格,代码示例如下:
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
children: [
{
title: 'Street',
dataIndex: 'street',
key: 'street',
},
{
title: 'City',
dataIndex: 'city',
key: 'city',
},
{
title: 'Zip',
dataIndex: 'zip',
key: 'zip',
},
],
},
];
Ant Design Pro可以通过Table组件的rowSelection和editable两个属性来实现可编辑表格,代码示例如下:
const [editableKeys, setEditableRowKeys] = useState([]);
const [editableData, setEditableData] = useState(dataSource);
const onEditSave = async () => {
// 处理编辑后的数据
await updateDataSource(editableData);
setEditableRowKeys([]);
}
const components = {
body: {
row: EditableRow,
cell: EditableCell,
},
};
const columns = [
...
{
title: 'Operation',
dataIndex: 'operation',
width: 100,
render: (_, record) => {
const editable = isEditable(record);
return editable ? (
onEditSave(record)}>Save
onCancel(record)}>Cancel
) : (
onEdit(record)}>
Edit
);
},
},
]