🧐[问题] EditableProTable column formItemProps

提问前先看看：

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🧐 问题描述

EditableProTable column formItemProps rules required 动态更新UI提示不生效，
第2行 状态字段更新后，描述字段的必填标识无法实时更新

### 💻 示例代码

`
import type {
EditableFormInstance,
ProColumns,
ProFormInstance,
} from '@ant-design/pro-components';
import {
EditableProTable,
ProCard,
ProForm,
ProFormDependency,
ProFormField,
} from '@ant-design/pro-components';
import React, { useRef, useState } from 'react';

type DataSourceType = {
id: React.Key;
title?: string;
decs?: string;
state?: string;
created_at?: number;
update_at?: number;
children?: DataSourceType[];
};

const defaultData: DataSourceType[] = [
{
id: '624748504',
title: '活动名称一',
decs: '这个活动真好玩',
state: 'open',
created_at: 1590486176000,
update_at: 1590486176000,
},
{
id: '624691229',
title: '活动名称二',
decs: '',
state: 'closed',
created_at: 1590481162000,
update_at: 1590481162000,
},
];

export default () => {
const [editableKeys, setEditableRowKeys] = useState(() =>
defaultData.map((item) => item.id),
);
const formRef = useRef>();
const editorFormRef = useRef>();
const columns: ProColumns[] = [
{
title: '活动名称',
dataIndex: 'title',
formItemProps: () => {
return {
rules: [{ required: true, message: '此项为必填项' }],
};
},
width: '30%',
},
{
title: '状态',
key: 'state',
dataIndex: 'state',
valueType: 'select',
valueEnum: {
all: { text: '全部', status: 'Default' },
open: {
text: '未解决',
status: 'Error',
},
closed: {
text: '已解决',
status: 'Success',
},
},
},
{
title: '描述',
dataIndex: 'decs',
editable: (text, record, index) => {
// console.log('editable', text, record, index);
return true;
},
formItemProps: (form, config) => {
const entry = config?.entry;
const required = entry.state === 'closed';
return {
rules: [
{
required: required,
},
],
required: required,
};
},
fieldProps: (form, config) => {
return {
// disabled: config?.entry?.state === 'open',
// value: config?.entry?.state === 'open' ? '':config?.entry?.decs
};
},
},
{
title: '活动时间',
dataIndex: 'created_at',
valueType: 'date',
},
{
title: '操作',
valueType: 'option',
width: 200,
render: (text, record, _, action) => [
{
const tableDataSource = formRef.current?.getFieldValue(
'table',
) as DataSourceType[];
formRef.current?.setFieldsValue({
table: tableDataSource.filter((item) => item.id !== record.id),
});
}}
>
删除
,
],
},
];

return (

formRef={formRef}
initialValues={{
table: defaultData,
}}
validateTrigger="onBlur"
onFinish={(value) => {
console.log('value', value);
}}
>

rowKey="id"
scroll={{
x: 960,
}}
editableFormRef={editorFormRef}
headerTitle="可编辑表格"
maxLength={5}
name="table"
recordCreatorProps={{
position: 'bottom',
record: () => ({ id: (Math.random() * 1000000).toFixed(0) }),
}}
columns={columns}
editable={{
type: 'multiple',
editableKeys,
onChange: setEditableRowKeys,
actionRender: (row, config, defaultDom) => {
return [defaultDom.delete];
},
}}
/>



{({ table }) => {
return (

);
}}




);
};

`

### 🚑 其他信息

Start by reproducing the example with EditableProTable, focusing on the description column's formItemProps and its dynamic required rule after the state field changes. Trace how the table form updates column metadata and validation indicators; done means the description field's required marker and validation rule update immediately when the row state changes.

Written by the indexing model from the issue text.