Ant Design - 如何将Table包装为Form.List in antd
创始人
2024-11-07 03:30:41
0次
要将Table包装为Form.List，您可以按照以下步骤进行操作：
- 导入所需的组件和方法：
import { Form, Table, Input, Button } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useForm } from 'antd/lib/form/Form';
- 创建一个自定义组件，用于包装Table，并将其作为Form.Item的子组件：
const TableForm = () => {
const [form] = useForm();
const [dataSource, setDataSource] = useState([]);
const columns = [
{
title: '列1',
dataIndex: 'column1',
key: 'column1',
render: (text, record, index) => (
),
},
{
title: '操作',
dataIndex: 'operation',
key: 'operation',
render: (text, record, index) =>
dataSource.length >= 1 ? (
) : null,
},
];
const handleDelete = (index) => {
const newDataSource = [...dataSource];
newDataSource.splice(index, 1);
setDataSource(newDataSource);
};
const handleAdd = () => {
const newData = {
column1: '',
};
setDataSource([...dataSource, newData]);
};
return (