ant-design / ant-design/pro-components

🐛[BUG] 使用 EditableProTable renderFormItem 下拉選單 Select 下添加任一標籤<span> form功能無法正常運作

Open
#8,437 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

### 🐛 bug 描述

使用 EditableProTable renderFormItem 下拉選單 Select 下添加任一標籤 form功能無法正常運作

### 🏞 期望结果

表單會自動帶入資料,form.validateFields()檢驗正確

```
const InsertCarModalTable = (props) => {
const [editForm] = Form.useForm();

const defaultData = [
{
id: "0226-sd1",
car_id: "0226-sd1",
type: "2",
department: {label: "供銷部", value: "供銷部"}
},
{
id: "02262-sd2",
car_id: "02262-sd2",
type: "1",
department: {label: "供銷部", value: "供銷部"}

},
{
id: "02246-sd3",
car_id: "02246-sd3",
type: "2",
department: {label: "供銷部", value: "供銷部"}

},
{
id: "02246-sd4",
car_id: "02626-sd4",
type: "1",
department: {label: "財務部", value: "財務部"}

},
];

const [editableKeys, setEditableRowKeys] = useState(() =>
defaultData.map((item) => item.id)
);
const [dataSource, setDataSource] = useState(() => defaultData);

const deleteData = (id) => {
// console.warn(dataSource)
let newData = dataSource.filter((item) => {
return item.id !== id;
});
setDataSource(newData);
}

const [columns, setColumns] = useState([
{
title: '車號',
dataIndex: 'car_id',
width: 150,

formItemProps: {
rules: [
{
required: true,
whitespace: true,
message: '必須輸入',
},
],
},
renderFormItem: (item, record, index) => {
// console.log(item.entity.car_id)
return (




)
},
},
{
title: '類型',
dataIndex: 'type',
width: 150,

formItemProps: {
rules: [
{
required: true,
whitespace: true,
message: '必須輸入',
},
],
},
renderFormItem: (item, record, index) => {

return (


汽車
機車


)
},

},
{
title: '部門',
width: 150,
dataIndex: "department",
valueType: 'select',
formItemProps: {
rules: [
{
required: true,
message: '必須輸入',
},
],
},
renderFormItem: (dom, {type, defaultRender, ...rest}, form) => {
return (
<>
{/*123*/} //如果加入任一標籤form 功能失效
{
console.warn(val);
console.warn(val);
form.setFieldsValue({department: val})
// setMember(val)
}}
style={{width: '100%'}}
>

)
}
},
{
title: '圖片上傳',
width: 100,
dataIndex: 'attachments',
renderFormItem: () => {
return (
<>
{
console.warn(e);
}}/>

)
}
},
{
title: '操作',

valueType: 'option',
dataIndex: "flag",
key: "delete",
render: () => {
return null;
},

},
]);

const components = {
header: {
cell: ResizeableTitle,
}
,
};
const handleResize = index => (e, {
size
}) => {
const newColumns = [...columns];
newColumns[index] = {
...newColumns[index],
width: size.width,
};
setColumns(newColumns);
};
const mergeColumns = columns.map((col, index) => ({
...
col,
onHeaderCell
:
column => ({
width: (column).width,
onResize: handleResize(index),
}),
}))
;

return (



修改公務車




修改

({
id: uuidv4(),
type: "1"
}),
}}

editable={{
type: 'multiple',
form: editForm,
editableKeys,
deleteText: "",
actionRender: (row, config, defaultDoms) => {
return (


{
deleteData(row.id);
}}> 刪除


)
},
onValuesChange: (record, recordList) => {
setDataSource(recordList);
},
onChange: setEditableRowKeys,

}}
/>

)
}
export default InsertCarModalTable;
```

https://github.com/ant-design/pro-components/assets/36724474/a241b54b-f733-4120-b9a5-5c57a547df9b

Contributor guide

Open the contributing guide

Research direction

Start at EditableProTable's renderFormItem path and reproduce the example with the Select wrapped in a fragment containing a span. Check how the wrapper affects form field binding, initial values, and form.validateFields(). Done means the form still auto-populates and validates correctly when the additional label is present.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.