根据代码,编辑时展示的值是通过 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 方法更新表格中对应行的数据。这样,编辑时展示的值就可以在选择框中显示了

import React useRef useState from react;import ContentWrap from ContentWrap;import ActionType EditableFormInstance EditableProTable ProColumns from ant-designpro-table;import getCoreMemberList

原文地址: https://www.cveoy.top/t/topic/fJ7s 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录