🧐[问题]如何在表单里定义(form)仅仅可读,不可修改的列？

[gaohongwei]

一个表单中的大多数列是用于接受用户输入。但 有些列，系统只想显示，但不让修改； 有些列，需要在在表单中，但不需要显示，比如，ID 我的问题是 如何如何达到这个要求。 具体说来就是：如何

1. 让一个列在表单(form)里仅仅可读,不可修改。 2.让一个列在表单以隐藏的方式存在？hideInForm的列在表单似乎不存在。

这两种情况，其实有不少应用。 现在支持吗，请教怎么做？

有没有类似这样的？ const columns = [ { title: "Email", dataIndex: "email", hideInForm: false, display: true, readOnly: true }, { title: "Some thing", dataIndex: "someThing", hideInForm: false, display: false, }, ];

[gaohongwei]

没人理我，顶一下

[AngelLiang]

经过我不懈努力的寻找及测试，现在有一个解决方案可以解决type='form'表单里设置只读字段。只需要覆写columns 中的renderFormItem字段即可。下面以设置用户名只读为例：

pro-table版本："@ant-design/pro-table": "^2.9.16"

columns配置

import { useRef, useState } from 'react';

...

  const [updateFormValues, setUpdateFormValues] = useState({});

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      // 重点在下面代码
      renderFormItem: (_, { type, defaultRender, ...rest }, form) => {
        if (type === 'form') {
          // 返回新的组件
          return <Descriptions.Item label={rest.label}>{updateFormValues.username}</Descriptions.Item>
        }
        return defaultRender(_);
      }
    },
]

ProTable配置

        <ProTable
          type="form"
          form={{
            initialValues: updateFormValues, 
          }}
          rowKey="id"
          columns={columns}
          rowSelection={{}}          
        />

效果图：

参考资料：

• 搜索表单自定义
• Descriptions描述列表

[whitefly]

我也想找"有些列，需要在在表单中，但不需要显示"的实现方式