ant-design / pro-components

🏆 Use Ant Design like a Pro!
https://pro-components.antdigital.dev
MIT License
4.3k stars 1.36k forks source link

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

Open SEELELancelot opened 5 months ago

SEELELancelot commented 5 months ago

Reproduction link

Steps to reproduce

     {
      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>

</>
        )
      }
    },

 <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,

        }}
      />

What is expected?

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

What is actually happening?

renderFormItem Select 中加入任一標籤 ,form 功能無法正常使用

Environment Info
antd 5.17.3
React 18.2.0
System System
Browser google

https://github.com/ant-design/ant-design/assets/36724474/cb4caa37-f14c-415d-8564-4324ae0dcedd