alibaba / alist

Alibaba Group Unified List Solution.

Home Page:https://alist.wiki

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Repeater 嵌套 Repeater 时,第二个 repeater 新增按钮,需要点击两次

evan-lin9 opened this issue · comments

export const customizeFormType = {
  options: [
    { label: '单选', value: 'Radio' },
    { label: '多选', value: 'Checkbox' },
    { label: '文本', value: 'Input' },
    { label: '数字', value: 'InputNumber' },
    { label: '日期', value: 'DatePicker' },
    { label: '日期区间', value: 'RangePicker' },
  ],
  text: {
    Radio: '单选',
    Checkbox: '多选',
    Input: '文本',
    InputNumber: '数字',
    DatePicker: '日期',
    RangePicker: '日期区间'
  }
};
            <FormItem label="自定义表单" name="customizeForm">
              <InlineRepeater multiple>
                <FormItem label="表单标题" name="title">
                  <Input />
                </FormItem>
                <FormItem label="表单类型" name="type">
                  <Select options={customizeFormType.options} />
                </FormItem>
                <FormItem label="选项" multiple>
                  <FormItem
                    render={(values: any, core: any) => {
                      if (values.type === 'Radio' || values.type === 'Checkbox') {
                        return (
                          <InlineRepeater
                            onChange={(val: any) => {
                              core.setItemValue('options', val)
                            }}
                            value={values.options}
                          >
                            <FormItem label="选项名" name="label">
                              <Input />
                            </FormItem>
                            <FormItem label="选项值" name="value">
                              <Input />
                            </FormItem>
                          </InlineRepeater>
                        )
                      } else {
                        return ''
                      }
                    }}
                  />
                </FormItem>
              </InlineRepeater>
            </FormItem>

需要贴更详细的代码来查看,以下代码是最简例子,没有复现

<Form layout={{label: 5, control: 19}}>
        <FormItem label="rpt" name="rpt">
            <InlineRepeater multiple>
                <FormItem label="username" name="username"><Input /></FormItem>                                
                <FormItem label="deep" name="deep">
                    <InlineRepeater multiple>
                        <FormItem label="deepname" name="deepname"><Input /></FormItem>                        
                    </InlineRepeater>
                </FormItem>
            </InlineRepeater>
        </FormItem>
    </Form>

稍微改动下,包裹item或formItem即可,抱歉这么久才回复。

                <FormItem label="选项" multiple>
                  <FormItem
                    render={(values, core) => {
                      if (values.type === 'Radio' || values.type === 'Checkbox') {
                        return (
                          <Item name="options">
                            <InlineRepeater>
                                <FormItem label="选项名" name="label">
                                <Input />
                                </FormItem>
                                <FormItem label="选项值" name="value">
                                <Input />
                                </FormItem>
                            </InlineRepeater>
                          </Item>
                        )
                      } else {
                        return ''
                      }
                    }}
                  />
                </FormItem>