vue prop表单验证二维数组
效果单个数组:prop="'contactList.' + index + '.contactName'"二维数组:prop="'contactList.' + index +'.contactBox.' + bb + '.contactValue'"所有代码<div v-for="(domain, index) in formAddXianSuo.contactList" :key="in
·
效果
单个数组
: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>
更多推荐
已为社区贡献1条内容
所有评论(0)