Antd表格组件(table)可编辑单元格使用
export default function Category() {
const [category, setcategory] = useState([])
// 创建上下文关系对象
const EditableContext = React.createContext(null);
// 保存
function handleSaves(record) {
console.log(record)
}
const columns = [
{
title: 'ID',
dataIndex: 'id',
align: 'center',
key: 'id',
},
{
title: '标题',
dataIndex: 'title',
align: 'center',
// 可编辑单元格配置项
onCell: (record, index) => ({
record,
editable: true,
dataIndex: 'title',
title: '标题',
handleSave: handleSaves, // 保存事件
})
}
];
// EditableRow start
const EditableRow = ({ index, ...props }) => {
const [form] = Form.useForm();
return (
<Form form={form} component={false}>
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
</Form>
);
};
// EditableRow end
// EditableCell start
const EditableCell = ({
title,
editable,
children,
dataIndex,
record,
handleSave,
...restProps
}) => {
const [editing, setEditing] = useState(false);
const inputRef = useRef(null);
const form = useContext(EditableContext);
useEffect(() => {
if (editing) {
inputRef.current.focus();
}
}, [editing]);
const toggleEdit = () => {
setEditing(!editing);
form.setFieldsValue({
[dataIndex]: record[dataIndex],
});
};
const save = async () => {
try {
const values = await form.validateFields();
toggleEdit();
handleSave({ ...record, ...values });
} catch (errInfo) {
console.log('Save failed:', errInfo);
}
};
let childNode = children;
if (editable) {
childNode = editing ? (
<Form.Item
style={{
margin: 0,
}}
name={dataIndex}
rules={[
{
required: true,
message: `${title} is required.`,
},
]}
>
<Input ref={inputRef} onPressEnter={save} onBlur={save} />
</Form.Item>
) : (
<div
className="editable-cell-value-wrap"
style={{
paddingRight: 24,
}}
onClick={toggleEdit}
>
{children}
</div>
);
}
return <td {...restProps}>{childNode}</td>;
};
// EditableCell end
return (
<Table
bordered
dataSource={category}
columns={columns}
rowKey={item => item.id}
components={{
body: {
row: EditableRow,
cell: EditableCell,
},
}}
/>
)
}