import React useRef useState from react;import ContentWrap from ContentWrap;import ActionType EditableFormInstance EditableProTable ProColumns from ant-designpro-table;import getCoreMemberList
根据代码,编辑时展示的值是通过 ProTable 中的 renderFormItem 属性渲染的,而这里的 renderFormItem 是返回一个 React element 的函数,因此可以在这里自定义展示的内容。具体做法可以参考以下示例:
{
title: '责任人',
dataIndex: 'memberName',
width: 150,
align: 'center',
renderFormItem: (_, { record }) => {
const [value, setValue] = useState(record.memberName?.memberAccount);
return (
<UserSelect
value={value}
changeData={(data: any) => {
setValue(data.memberAccount);
editableFormRef?.current?.setRowData?.(record?.id as any, { ...data });
}}
readonly={false}
/>
);
},
render: (_, record: any) => {
return (
<>
{(isString(record.memberName) ? record.memberName : record.memberName?.memberAccount) ||
''}
</>
);
},
},
在 renderFormItem 中,定义一个状态 value,用来保存当前选择的值。然后在 UserSelect 组件中,添加 value 属性,并在 changeData 中更新 value 的值。同时,使用 editableFormRef 中的 setRowData 方法更新表格中对应行的数据。这样,编辑时展示的值就可以在选择框中显示了
原文地址: https://www.cveoy.top/t/topic/fJ7s 著作权归作者所有。请勿转载和采集!