antd design Form动态增减表单项（多个）,组装数据及编辑回显，选择初始值，控制添加减少表单项数量等_antd-design-vue3的form动态增减

新增效果图如下

编辑效果图如下

代码如下

const {
      salesFollow: { info },
      form: { getFieldDecorator, getFieldValue },
    } = this.props;

const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 12 },
    };
1
2
3
4
5
6
7
8
9

    getFieldDecorator('keys', { initialValue: info.timeList ? info.timeList : [] });
    const keys = getFieldValue('keys') ? getFieldValue('keys') : [];
    const paramFormItems = keys.map((k, index) => (
      <Row key={k.id}>
        <FormItem
          style={{marginBottom:0}}
          {...(formItemLayout)}
          label={getFieldDecorator(`paramTime_${k.id}`, {
            initialValue: k.startTime ? moment(k.startTime) : null,
          })(
            <DatePicker
              format='YYYY-MM-DD'
              placeholder="请选择日期"
            />
          )}
          key={k.index || k.index === 0 ? k.index : k}
          required={false}
          colon={false}
        >
          <Row type="flex">
            <Col>
              <FormItem style={{ marginLeft: 10, marginBottom:0 }}>
                {getFieldDecorator(`paramStart_${k.id}`, {
                  initialValue: k.startTime ? moment(k.startTime) : null,
                })(
                  <TimePicker
                    format=" HH：mm "
                    placeholder="开始时间"

                  />
                )}
              </FormItem>
            </Col>
            <Col>
              <FormItem style={{ marginLeft: 10, marginBottom:0 }}>
                {getFieldDecorator(`paramEnd_${k.id}`, {
                  initialValue: k.endTime ? moment(k.endTime) : null,
                })(
                  <TimePicker
                    format=" HH：mm "
                    placeholder="结束时间"
                  />
                )}
              </FormItem>
            </Col>
            <Col>
              <FormItem style={{marginBottom:0}}>
                <Icon
                  style={{ marginLeft: 10 }}
                  className="dynamic-delete-button"
                  type="minus-circle-o"
                  onClick={() => this.remove(index)}
                />
              </FormItem>
            </Col>
          </Row>
        </FormItem>
      </Row>
    ));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

             <Row span={24} style={myStyle.rowStyle}>
                <Col span={24}>可上课时间：
                  {
                    paramFormItems
                  }
                </Col>
              </Row>
              <Row span={24} style={myStyle.rowStyle}>
                <Col span={8}>
                  <Button type="dashed" style={{ width: '50%' }} onClick={this.add}>
                    <Icon type="plus" /> 添加可上课时间
                  </Button>
                </Col>
              </Row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

增加，减少表单项方法

    remove = (k) => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
    _.remove(keys,(d, i) => i === k );
    // We need at least one passenger
    // can use data-binding to set
    this.props.form.setFieldsValue({
      keys,
    });
  };

  add = () => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
    const nextKeys = keys.concat([{ id: uuid }]);
    uuid++;
    // can use data-binding to set
    // important! notify form to detect changes
    this.props.form.setFieldsValue({
      keys: nextKeys,
    });
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

控制添加表单的个数可以通过控制keys的长度来实现

  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    if (keys.length === 1) {
      message.error("最多只能添加一个!");
      return;
    }
    const nextKeys = keys.concat([{ id: uuid }]);
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    });
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

  remove = (k) => {
    // can use data-binding to get
    const keys = this.props.form.getFieldValue('keys');
     if (keys.length <= 1) {
      message.error('请至少保留一个');
      return;
    }
    _.remove(keys,(d, i) => i === k );
    // We need at least one passenger
    // can use data-binding to set
    this.props.form.setFieldsValue({
      keys,
    });
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14

提交表单组装数据方法

   handleSubmit = () => {
    const { form, } = this.props;
    form.validateFields((errors, values) => {
      const timeList = [];
      for (let i = 0; i <= uuid; i++) {
        if (values[`paramTime_${i}`]) {
          if (!values[`paramStart_${i}`] || !values[`paramEnd_${i}`]) {
            message.error('请选择上课时间');
            return;
          }
          const time = values[`paramTime_${i}`] ? moment(values[`paramTime_${i}`]).format('YYYY-MM-DD') : null;
          const start = values[`paramStart_${i}`] ? moment(values[`paramStart_${i}`]).format('HH:mm:ss') : null;
          const end = values[`paramEnd_${i}`] ? moment(values[`paramEnd_${i}`]).format('HH:mm:ss') : null;
          timeList.push({
            queryStartDate: `${time } ${ start}`,
            queryEndDate: `${time } ${ end}`,
          });
        }
      }
      console.info('timeList', timeList);
    });
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

数据

组装数据前

组装数据后

引用到的组件

 import moment from 'moment';
 import { Button, Card,Cascader, Row, Col, message, DatePicker, Input, Form, Icon } from 'antd';
 import TimePicker from 'antd/es/time-picker';
 const FormItem = Form.Item;
 let uuid = 100000;
1
2
3
4
5

编辑回显数据如下


因为用的是时间控件，所以提交和编辑回显的时候都需要做时间格式化处理，如果是其他控件可以省略这一步。

新增表单时控制初始化数据可以通过控制keys的长度来实现，如默认显示2个

getFieldDecorator('keys', { initialValue: info.timeList.length > 0 ? info.timeList : [1,2] });
1