Vue antd formModal 表单循环渲染 && React antd form 表单循环渲染

一、Antd-Vue-FormModel

官方文档地址: https://www.antdv.com/components/form-model-cn/

实现效果

示例代码

data(){
	return {
		serviceForm: {
        	serveList: []
      }
	}
}

		<a-form-model
          :hideRequiredMark="true"
          :model="serviceForm"
          ref="serviceForm"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 17 }"
        >
          <div v-for="(item, vindex) in serviceForm.serveList">
          	<a-row>
            	<a-col :span="24">
                	<a-form-model-item
                   		label="选择领域"
                   		:prop="`serveList.${vindex}.area`"
                        :rules="[
                          {
                            message: '请选择领域',
                            trigger: 'blur',
                            required: true,
                          },
                        ]"
                      >
                        <a-select v-model="item.area">
                          <a-select-option value="1" key="1">软件开发</a-select-option>
                        </a-select>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item
                        label="价格"
                        :prop="`serveList.${vindex}.price`"
                        :rules="[
                          {
                            required: true,
                            message: '请输入价格',
                            trigger: 'blur',
                          },
                        ]"
                      >
                        <a-input v-model="item.price" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item
                        label="服务名称"
                        :prop="`serveList.${vindex}.name`"
                        :rules="[
                          {
                            required: true,
                            message: '请输入服务名称',
                            trigger: 'blur',
                          },
                          {
                            min: 1,
                            max: 100,
                            message: '服务名称过长',
                            trigger: 'blur',
                          },
                          {
                            pattern:
                              /^[\u4E00-\u9FA5A-Za-z\s]+(·[\u4E00-\u9FA5A-Za-z]+)*$/,
                            message: '服务名称格式有误',
                            trigger: 'change',
                          },
                        ]"
                      >
                        <a-input v-model="item.name" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item
                        label="描述"
                        :prop="`serveList.${vindex}.description`"
                      >
                        	<a-textarea placeholder="请对本服务进行描述" v-model="item.description"/>
                      </a-form-model-item>
                    </a-col>
                  </a-row>
                </div>
            </a-form-model>

注意

1. form组件内多层循环会导致rules验证失效问题，需要将rules写在具体item上。
2. 关键字prop格式问题，需要 :prop="`serveList.${vindex}.area`"这种格式绑定。

二、Antd-React-Form

官方文档地址: https://ant.design/components/form-cn/

示例代码

import { Form, Row, Col, Select, } from 'antd';
const { Option } = Select;

@Form.create()
export default class CustomData extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      customDataList: [],
    };
  }
  render() {
    const { customDataList } = this.state;
    const formItemLayout = {
      labelCol: {
        xs: { span: 5 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 12 },
      },
    };
    const colLayout = {
      xs: { span: 24 },
      sm: { span: 24 },
    };
    const { getFieldDecorator } = this.props.form;
    return (
      <>
        <Form {...formItemLayout}>
              <Row>
                <h1>基础参数：</h1>
                {
                  customDataList.map((item, index) => {
                    return <Col {...colLayout}>
                      <Form.Item label={`${item.attrKeyVO.attrName}:  `}>
                        {getFieldDecorator(`dynamic_${item.attrKeyVO.attrId}`, {

                        })(
                          <Select onChange={(e) => this.SelectLabel({ item, index, e })}>
                            {
                            	item.attrValueVOS.map(v => <Option value={v.valueId}>{v.name}</Option>)
                            }
                          </Select>
                        )}
                      </Form.Item>
                    </Col>
                  })
                }
           	 </Row>
        </Form>
      </>
    );
  }
}