可编辑表格内容
import { Form, Input } from 'antd';
interface Item {
key: string;
name: string;
age: string;
address: string;
}
interface EditableCellProps {
title: React.ReactNode;
editing: boolean;
children: React.ReactNode;
dataIndex: keyof Item;
record: Item;
checkoutKey?: string[];
}
const EditableCell: React.FC<EditableCellProps> = ({
editing,
dataIndex,
title,
record,
children,
checkoutKey, // 已选择key
...restProps
}) => {
const { key } = record || {};
const inputNode = <Input autoComplete="off" disabled={(checkoutKey || []).indexOf(key) === -1} />;
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex+ '-' + key}
style={{
margin: 0,
}}
rules={[
{
required: true,
message: `请输入${title}!`,
},
]}
>
{inputNode}
</Form.Item>
) : (
children
)}
</td>
);
};
export default EditableCell;
表格引用
formTabIn.getFieldsValue() 获取输入的表单内容
<Form form={formTabIn} component={false}>
<Table
components={{
body: {
cell: (props: any) => EditableCell({...props, checkoutKey}),
},
}}
rowSelection={{
type: 'checkbox',
...rowSelection,
}}
columns={column as ColumnTypes}
dataSource={data}
size="small"
bordered={true}
rowClassName="editable-row"
pagination={false}
title={() => '选择输入参数'}
/>
</Form>
表头设置
const column = columns.map((col, index) => {
if (!col.editing) {
return col;
}
return {
...col,
onCell: (record: DataType) => ({
record,
editing: col.editing,
dataIndex: col.dataIndex,
index,
title: col.title,
}),
};
});
表格多选,并与其他表格互斥,并动态设置不可选
const rowSelection = {
selectedRowKeys: checkoutKey,
onChange: (selectedRowKeys: string[]) => {
setCheckoutKey(selectedRowKeys);
},
getCheckboxProps: (record: any) => ({
disabled: checkoutOutKey.indexOf(record.key) > -1, // 配置无法勾选的列
}),
};