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

经过我不懈努力的寻找及测试，现在有一个解决方案可以解决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 {updateFormValues.username}

}

return defaultRender(_);

}

},

]

ProTable配置

type="form"

form={{

initialValues: updateFormValues,

}}

rowKey="id"

columns={columns}

rowSelection={{}}

/>

效果图：

参考资料：