element多层数据的form表单校验

方法一：

hmtl部分

<el-form ref="form" :model="formData" label-width="148px" class="" :rules="formRules">

<el-row v-for="(item,index) in formData.tableChangeList" :key="index">

<el-col :span="7">

<el-form-item label="客户编号：" :prop="`tableChangeList.${index}.customerNumber`" :rules="formRules.customerNumber">

<el-input v-model="item.customerNumber" size="small" placeholder="请输入" disabled />

</el-form-item>

</el-col>

<el-col :span="7">

<el-form-item label="完成时间：" :prop="`tableChangeList.${index}.workTime`" :rules="formRules.workTime">

<el-date-picker type="date" v-model="item.workTime" value-format="yyyy-MM-dd" placeholder="请选择" size="small" style="width: 100%;" :disabled="type=='view'"></el-date-picker>

</el-form-item>

</el-col>

</el-row>

<el-row class="form-bottom-operation">

<el-col :span="7">

<el-form-item label="操作人：" prop="applyUserName">

<el-input v-model="applyUserName" size="small" disabled></el-input>

</el-form-item>

</el-col>

<el-col :span="7">

<el-form-item label="操作部门：" prop="orgName">

<el-input v-model="orgName" size="small" disabled></el-input>

</el-form-item>

</el-col>

<el-col :span="7">

<el-form-item label="操作日期：" prop="createTime">

<el-date-picker type="date" placeholder="选择日期" v-model="createTime" value-format="yyyy-MM-dd" size="small" style="width: 100%;" disabled></el-date-picker>

</el-form-item>

</el-col>

</el-row>

<div class="form-bottom">

<el-button icon="iconfont icon-button" type="primary" @click="onSubmit" size="small" >提交</el-button>

</div>

</el-form>

js部分：

formRules: {

customerNumber: [

{ required: true, message: '请输入客户编号', trigger: 'blur' },

],

workTime: [

{ required: true, message: '请选择完成时间', trigger: 'change' },

]

},

方法二(form嵌套):

html部分：

<el-form ref="form" :model="formData" label-width="148px" :rules="formRules">

<div class="form-card mb20">

<div class="pd20">

<el-row type="flex" style="flex-wrap: wrap; flex-direction: row">

<el-col :span="8">

<el-form-item label="申请日期：" prop="applyTime">

<el-date-picker type="date" placeholder="选择日期" v-model="formData.applyTime" size="small" style="width: 100%;" disabled></el-date-picker>

</el-form-item>

</el-col>

<el-col :span="8">

<el-form-item label="项目名称：" prop="collectName">

<el-input v-model="formData.collectName" size="small" placeholder="请输入" :disabled="type === 'view'"></el-input>

</el-form-item>

</el-col>

</el-row>

<el-row v-for="(item,index) in formData.collectivityWaterMeterInfoList" :key="index" class="table-tr">

<el-form :ref="'waterMeter'+index" :model="item" label-width="" :rules="meterRules">

<el-col :span="8">

<el-form-item label="" prop="waterType">

<dict-selectkf v-model="item.waterType" :label.sync="item.waterTypeLabel" code="水表类别" defaults size="small" placeholder="请选择" class="fullWidth" :disabled="type === 'view'"></dict-selectkf>

</el-form-item>

</el-col>

<el-col :span="8">

<el-form-item label="" prop="caliber">

<dict-selectkf v-model="item.caliber" :label.sync="item.caliberLabel" code="口径" defaults size="small" placeholder="请选择" class="fullWidth" :disabled="type === 'view'"></dict-selectkf>

</el-form-item>

</el-col>

<el-col :span="8">

<el-form-item label="" prop="waterNatureList">

<dict-cascader v-model="item.waterNatureList" :label.sync="item.waterNatureLabel" :code="'用水性质'" :filterable="true" size="small" :placeholder="'请选择'" class="fullWidth" :disabled="type == 'view'"></dict-cascader>

</el-form-item>

</el-col>

</el-form>

</el-row>

<div style="margin-top: 10px;">

<el-button icon="el-icon-circle-plus-outline" type="primary" @click="tableAdd" size="small" v-if="type !== 'view'">添加</el-button>

</div>

</div>

</div>

</el-form>

js部分：

formRules: {

applyTime: [ { required: true, message: '请选择申请日期', trigger: 'change' } ]

collectName: [ { required: true, message: '请填写项目名称', trigger: 'change' } ]

},

meterRules: {

waterType: [ { required: true, message: '请选择水表类别', trigger: 'change' } ],

caliber: [ { required: true, message: '请选择口径', trigger: 'change' } ],

waterNatureList: [ { required: true, message: '请选择用水性质', trigger: 'change' } ],

applyNum: [ { required: true, message: '请输入申请数量', trigger: 'change' } ]

}

methods:{

onSubmit(){

this.$refs['form'].validate((valid) => { //外表单校验

let validator = true

let temp = this.formData.collectivityWaterMeterInfoList

if(temp.length){

for( let i = 0; i < temp.length; i++ ){

this.$refs[`waterMeter${i}`][0].validate((valid) => { //内表单校验

if( !valid ){

validator = false

}

})

if( !validator ) {

this.msgError('请完善水表信息')

break

}

}

}else{

this.msgError('请添加数据')

return

}

if(!validator) return

if (valid) { //校验成功后

this.btnLoading.submit = true

//可以调用接口执行

}

})

},

}