vue prop表单验证二维数组

效果

单个数组

:prop="'contactList.' + index + '.contactName'"

二维数组

:prop="'contactList.' + index +'.contactBox.' + bb + '.contactValue'"

所有代码

<div v-for="(domain, index) in formAddXianSuo.contactList" :key="index" class="contactBox">
                <el-form-item :prop="'contactList.' + index + '.contactName'" :rules="contactVolid4" label="联系人" label-width="78px" size="small">
                  <el-input v-model="domain.contactName" maxlength="20" style="width: 116px;"></el-input>
                </el-form-item>
                <div :style="{width:formAddXianSuo.contactList.length>1?'374px':'auto'}" class="contactBlockBox">
                  <div v-for="(va,bb) in domain.contactBox" :key="bb" class="contactBlock">
                    <el-form-item label="联系方式" label-width="78px" required size="mini">
                      <el-select v-model="va.contactType" style="width: 88px;" @change="teltype_rules(va.contactType)">
                        <el-option v-for="(val,ii) in lianxiTypeData" :key="ii" :label="val.label" :value="val.id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item v-if="va.contactType == 1" :prop="'contactList.' + index +'.contactBox.' + bb + '.contactValue'" :rules="contactVolid1" size="mini">
                      <el-input
                        ref="inputVals"
                        v-model="va.contactValue"
                        style="width: 130px;"
                        type="number"
                        @change="phone_rules($event,index,bb)"
                      ></el-input>
                    </el-form-item>
                    <el-form-item v-if="va.contactType == 2" :prop="'contactList.' + index +'.contactBox.' + bb + '.contactValue'" :rules="contactVolid2" size="mini">
                      <el-input
                        ref="inputVals1"
                        v-model="va.contactValue"
                        style="width: 116px;"
                        @change="phone_rules($event,index,bb)"
                      ></el-input>
                    </el-form-item>
                    <el-form-item v-if="va.contactType == 3" :prop="'contactList.' + index +'.contactBox.' + bb + '.contactValue'" :rules="contactVolid3" size="mini">
                      <el-input
                        ref="inputVals2"
                        v-model="va.contactValue"
                        style="width: 116px;"
                        @change="phone_rules($event,index,bb)"
                      ></el-input>
                    </el-form-item>
                    <el-button v-show="va.btnZhiYeDel && domain.contactBox.length>1" circle class="delBtnClass"
                               icon="el-icon-minus" size="mini" type="danger" @click="btnZhiYeDelFn(bb,domain.contactBox)">
                    </el-button>
                    <el-button v-show="va.btnZhiYeAdd" circle class="delete_add_btn"
                               icon="el-icon-plus" size="mini" type="success" @click="btnZhiYeAddFn(bb,domain.contactBox,4)"></el-button>
                  </div>
                </div>
                <el-form-item label="公司职位" label-width="78px" size="mini">
                  <el-select v-model="domain.position" style="width: 116px;">
                    <el-option v-for="(val, i) in zwData" :key="i" :label="val.label"
                               :value="val.label"></el-option>
                  </el-select>
                </el-form-item>
                <el-button v-show="domain.btnZhiYeDel && formAddXianSuo.contactList.length>1" class="delBtnClass" icon="el-icon-remove-outline" size="mini" type="danger" @click="btnZhiYeDelFn(index,formAddXianSuo.contactList)">
                </el-button>
                <el-button v-show="domain.btnZhiYeAdd" class="delete_add_btn" icon="el-icon-circle-plus-outline" size="mini" type="primary" @click="btnZhiYeAddFn(index,formAddXianSuo.contactList,5)"></el-button>
              </div>