IVIEW FORM组件动态添加表单,并深层校验
循环遍历出来的表单的 :prop 需要制定当前index拼接,单独指定 :rules
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150"> <div class="addReceiver"> <div class="case"> <h3><span>案场基本信息</span><span class="delCase" @click="caseUnbound" v-if="delCaseBtnFlag">删除案场</span></h3> <Row :gutter="24"> <Col span="10"> <FormItem label="案场:" prop="housesId" class="house_search"> <Select v-model="formValidate.housesId" label-in-value placeholder="请选择案场" filterable clearable :remote-method="remoteMethodHouses" @on-change='caseChange'> <Option v-for="(option,index) in optionsHouse" :value="option.housesId" :key="index"> {{`${option.housesName}(${option.orgName})-${option.city}`}}</Option> </Select> </FormItem> </Col> <Col span="10"> <FormItem label="呼入号归属地:" prop="city"> <!-- <Cascader :data="cityAttrSort" v-model="formValidate.cityId" :load-data="loadDataCity"></Cascader> --> <Select v-model="formValidate.city" clearable placeholder="请选择归属地" @on-change='cityChange'> <Option v-for="(option,index) in cityList" :value="option.city" :key="index"> {{option.city}}</Option> </Select> </FormItem> </Col> <Col span="10"> <FormItem label="呼入号码:" prop="inPhoneX"> <Select v-model="formValidate.inPhoneX" placeholder="请选择呼入隐私号" @on-open-change='callInPhoneSel' clearable> <Option v-for="item in callInPhoneList" :key="item.id" :value="item.phoneX"> {{item.phoneX}}</Option> </Select> </FormItem> </Col> </Row> </div> <div class="receiverForm"> <h3>承接人信息 <span class="addBtn" @click="creatAdd">新增</span></h3> <div class="receiverGun"> <div class="receiverFormBox" v-for="(item,index) in formValidate.adviserList" :key="index"> <div class="addData"> <Row :gutter="24"> <Col span="12"> <FormItem label="顾问姓名:" :prop="`adviserList.${index}.userId`" :rules="ruleValidate.userId" class="house_search"> <Select v-model="item.userId" label-in-value clearable :disabled="item.disabledFlag" filterable placeholder="请选择顾问" @on-change='e=>{return receiverUserChange(e,index)}'> <Option v-for="(option,index) in optionsUser" :value="option.userId" :key="index"> {{`${option.userName}(${option.workNo})`}}</Option> </Select> </FormItem> </Col> <Col span="12"> <FormItem label="呼出号归属地:" :prop="`adviserList.${index}.city`" :rules="ruleValidate.city"> <Select v-model="item.city" clearable :disabled="item.disabledFlag" placeholder="请选择归属地" @on-change='e=>{return receivercityChange(e,index)}'> <Option v-for="(option,index) in cityList" :value="option.city" :key="index"> {{option.city}}</Option> </Select> </FormItem> </Col> <Col span="12"> <FormItem label="呼出隐私号:" :prop="`adviserList.${index}.outPhoneX`" :rules="ruleValidate.outPhoneX"> <Select v-model="item.outPhoneX" placeholder="请选择呼出隐私号" :disabled="item.disabledFlag" @on-open-change='e=>{return receiverCallInPhoneSel(e,item,index)}' clearable> <Option v-for="(option,index) in item.callOutPhoneList" :key="index" :value="option.phoneX"> {{option.phoneX}}</Option> </Select> <!-- <Select v-model="item.outPhoneX" :disabled="item.disabledFlag" placeholder="请选择呼出隐私号"> <Option v-for="item in callInPhoneList" :key="item.id" :value="item.key"> {{item.value}}</Option> </Select> --> </FormItem> </Col> <Col span="12"> <FormItem label="承接线索类型:" :prop="`adviserList.${index}.clueType1`" :rules="ruleValidate.clueType1"> <CheckboxGroup v-model="item.clueType1"> <Checkbox :disabled="item.disabledFlag" :label="1"> 电话</Checkbox> <Checkbox :disabled="item.disabledFlag" :label="2"> 表单</Checkbox> </CheckboxGroup> </FormItem> </Col> </Row> </div> <div class="addBtn"> <span v-if="!item.disabledFlag" @click="addBtnSave(index)">保存</span> <span v-if="!item.disabledFlag" @click="addBtnCancel(item,index)">取消</span> <span v-if="item.disabledFlag" @click="addBtnEdit(index)">编辑</span> <span @click="addBtnDel(index)">删除</span> </div> </div> </div> <!-- <dt-info :label-width="90" ref='info2' :options='options2' style="width: 45%;" /> --> </div> </div> </Form>
formValidate: { housesName: '', housesId: null, buildingId: null, buildingName: '', city: '', inPhoneX: '', adviserList: [ { phone: '', disabledFlag: false, callOutPhoneList: [], userName: '', userId: '', userNameInfo: {}, city: '', receiverCityInfo: '', outPhoneX: '', clueType: null, clueType1: [] }], }, ruleValidate: { housesId: [ { required: true, message: '请选择案场', trigger: 'blur', type: 'number' }, ], city: [ { required: true, message: '请选择城市', trigger: 'blur' }, ], inPhoneX: [ { required: true, message: '请选择呼入隐私号', trigger: 'blur' }, ], userId: [ { pattern: /^\d+$/, required: true, message: '请选择顾问', trigger: 'blur' }, // { required: true, message: '请选择顾问', trigger: 'blur' }, ], city: [ { required: true, message: '请选择城市', trigger: 'blur' }, ], outPhoneX: [ { pattern: /^\d+$/, required: true, message: '请选择呼出隐私号', trigger: 'blur' }, ], clueType1: [ { pattern: /^\d+$/, required: true, type: 'array', message: '请选择承接线索类型', trigger: 'blur' }, ], },
参考:https://www.cnblogs.com/shb190802/p/12800726.html