element动态绑定prop,form rules设置

666 阅读1分钟

本文已参与[新人创造礼]活动,一起开启掘金创作之路。 工作过程中遇到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+'.'+绑定的字段名