本文已参与[新人创造礼]活动,一起开启掘金创作之路。 工作过程中遇到el-form正则校验form表单,子项list prop设置
<template v-for="(item,index) in form.area">
<el-row type="flex" :gutter="20">
<el-col :span="8">
<el-form-item label="土地面积" :prop="'area.'+index+'.landArea'" :rules="[{pattern: /^\d+(.\d{0,3})?$/, message: '请输入正确的土地面积'}]">
<el-input v-model="item.landArea"></el-input>
</el-form-item>
</el-col>
</el-row>
</template>
动态控制是否必填 通过required动态绑定其值
<el-form-item :prop="'list.'+index+'.price'" :rules="[{pattern: /^\d+(.\d{0,2})?$/, message: '请输入正确的价格'}, {required:item.disputeResolution=='4'?true:false, trigger: 'blur', message: '价格不能为空'}]" label="争议价格" class="w100p">
<el-input v-model="item.price" >
<template slot="append">元/吨</template>
</el-input>
</el-form-ite
注意:prop的命名为绑定的数组名+'.'+index+'.'+绑定的字段名