前言
大家好 我是歌谣 今天要说的是ant design实现表格行编辑的功能 考虑问题的时候我们需要多看官方的api
开发开始
紧接着我们对照着api进行开发 首先加一个table
```
total: menuData?.page.dataTotal,
showTotal: () => {
return '共 ' + menuData?.page.dataTotal + ' 条记录';
},
}}
columns={columns as ColumnTypes}
rowSelection={rowSelection}
/>```
对component进行定义
const components = { body: { row: EditableRow, cell: EditableCell, }, };
对 EditableRow进行定义
参照官网api引入对应的依赖
``` const EditableContext = React.createContext | null>(null);
const EditableRow: React.FC = ({ index, ...props }) => { const [form] = Form.useForm(); return (
); }; ```
对EditableCell进行定义
``` const EditableCell: React.FC = ({ 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}不能为空`,
},
]}
>
<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>;}; ```
handleSave进行定义
const handleSave = (row: any) => { // console.log(batchUpdateSizeList) batchUpdateSizeList([{ id: row.id, size: row.sizeName }]) .unwrap() .then((response: any) => { if (response.code === 200) { message.success("操作成功") } }); const newData: any = [...menuData.list]; const index = newData.findIndex((item: any) => row?.id == item.id); const item = newData[index]; newData.splice(index, 1, { ...item, ...row, }); setMenuData({ list: newData, page: { dataTotal: menuData.page.dataTotal, size: menuData.page.size, } }); };
handleSave中的数据是核心 利用当前行数据的回调可以处理数据和接口 完成当前行的更新
对表头column的设置
const columns = defaultColumns.map(col => { if (!col.editable) { return col; } return { ...col, onCell: (record: any) => ({ record, editable: col.editable, dataIndex: col.dataIndex, title: col.title, handleSave, }), }; });
对默认column的设置
以上是对column函数数据处理的讲解 接下来设置defaultColumn数据的设置 对可以操作的属性editable变为true即可
``` const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [ { title: '颜色', dataIndex: 'colorName', editable: false,
},
{
title: '尺码',
dataIndex: 'sizeName',
editable: true,
},
{
title: '扎号',
dataIndex: 'lotCode',
editable: false,
},
{
title: '床号',
dataIndex: 'bedCode',
editable: false,
},
{
title: '床次',
dataIndex: 'bedSeq',
editable: false,
},
{
title: '每扎数量',
dataIndex: 'lotCount',
editable: false,
},
{
title: '缸号',
dataIndex: 'batchCode',
editable: false,
},
{
title: '裁片名称',
dataIndex: 'cuttingName',
editable: false,
},
{
title: '结果',
dataIndex: 'result',
editable: false,
},
{
title: '操作',
dataIndex: 'operation',
render: (_, record: any) =>
<a onClick={() => handlePrintData(_, record)}>打印</a>
},
];```
结果展示
双击即可进行编辑操作 这个问题相对还是非常简单的 对照官网的案例进行修改即可 我是歌谣 微信公众号前端小歌谣 谢谢你的一键三联
