Vue antd formModal 表单循环渲染 && React antd form 表单循环渲染
vue antd formModal 表单循环渲染 && react antd form 表单循环渲染vue antd formModal官方文档地址: https://www.antdv.com/components/form-model-cn/<a-form-model:hideRequiredMark="true":model="serviceForm"ref="ser
·
一、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>
注意
- form组件内多层循环会导致rules验证失效问题,需要将rules写在具体item上。
- 关键字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>
</>
);
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)