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

[SEELELancelot]

🐛 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 (
          <div data-th={"車號:"} className={"cellphone_text_edit "}>
            <Input placeholder={""} defaultValue={item?.entity?.car_id}></Input>
          </div>
        )
      },
    },
    {
      title: '類型',
      dataIndex: 'type',
      width: 150,

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

        return (
          <div data-th={"類型:"} className={"cellphone_text_edit "}>

            <Radio.Group defaultValue={item?.entity?.type}>
              <Radio value={"1"}>汽車</Radio>
              <Radio value={"2"}>機車</Radio>

            </Radio.Group>

          </div>
        )
      },

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

</>
        )
      }
    },
    {
      title: '圖片上傳',
      width: 100,
      dataIndex: 'attachments',
      renderFormItem: () => {
        return (
          <>
            <ComUpload className={"cellphone_text_edit"} onChange={(e) => {
              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 (
    <div className={"EditTableStyle"}>
      <div style={{display: 'flex'}}>
        <h1 style={{flex: 1, textAlign: 'center', paddingLeft: '10px', color: "purple"}}>修改公務車</h1>
        <div style={{marginRight: '50px', marginTop: '10px'}}>
          <Button
            type="primary"
            key="save"

          >
            修改
          </Button>

        </div>

      </div>

      <div className={"tableMargin"} style={{border: 'solid 1px purple'}}>

      </div>

      <EditableProTable
        headerTitle=""
        columns={mergeColumns}
        rowKey="id"
        value={dataSource}
        onChange={setDataSource}
        components={components}
        recordCreatorProps={{
          creatorButtonText: '添加',
          newRecordType: 'dataSource',
          record: () => ({
            id: uuidv4(),
            type: "1"
          }),
        }}

        editable={{
          type: 'multiple',
          form: editForm,
          editableKeys,
          deleteText: "",
          actionRender: (row, config, defaultDoms) => {
            return (
              <div data-th={"操作:"} className={"cellphone_text_edit "}>
                <a onClick={() => {
                  deleteData(row.id);
                }}> 刪除 </a>
              </div>
            )
          },
          onValuesChange: (record, recordList) => {
            setDataSource(recordList);
          },
          onChange: setEditableRowKeys,

        }}
      />

    </div>

  )
}
export default InsertCarModalTable;

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

[kids-return]

同样遇到了这个问题