ant-design / ant-design/pro-components
🐛[BUG] 使用 EditableProTable renderFormItem 下拉選單 Select 下添加任一標籤<span> form功能無法正常運作
- 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 (
)
},
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
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