Vue element ui 多层嵌套表单验证

1.html

<el-form  ref="expenseApplyForm" :model="expenseApplyData" :rules="expenseApplyRules" label-width="160px">
    <el-form-item label="单号" prop="">
        <el-input v-model="expenseApplyData.orderId" :disabled="true" placeholder="系统自动生成"></el-input>
    </el-form-item>
    <el-form-item label="项目号" prop="projectId">
        <el-input v-model="expenseApplyData.projectId" placeholder="请填入项目号"></el-input>
    </el-form-item>
    <el-form-item label="报销人" prop="expenseAccount">
        <el-input v-model="expenseApplyData.expenseAccount" placeholder="请选择报销人"></el-input>
    </el-form-item>
    <div v-for="(item,index) in expenseApplyData.expenseDetailList " >
        <el-tag type="info" style="margin-left: 160px;margin-bottom: 2px">报销明细{{index+1}}</el-tag>
        <el-link type="primary" v-if="expenseApplyData.expenseDetailList.length > 1" style="float: right;margin-right:19%;" @click="deleteExpenseDetail(index)">删除</el-link>
        <el-form-item label="费用事由" >
            <el-select v-model="item.costsDetails" placeholder="请选择" :class="prefix + '-select'">
                <el-option label="交通费" value="交通费"></el-option>
                <el-option label="差旅费" value="差旅费"></el-option>
                <el-option label="招待费" value="招待费"></el-option>
                <el-option label="住宿费" value="住宿费"></el-option>
                <el-option label="团建费" value="团建费"></el-option>
                <el-option label="通讯费" value="通讯费"></el-option>
                <el-option label="活动经费" value="活动经费"></el-option>
                <el-option label="培训费" value="培训费"></el-option>
                <el-option label="办公耗材采购费" value="办公耗材采购费"></el-option>
                <el-option label="维修服务费" value="维修服务费"></el-option>
                <el-option label="其他" value="其他"></el-option>
            </el-select>
        </el-form-item><!--@change="countTotalMoney(index)"-->
        <el-form-item label="报销金额" :prop="`expenseDetailList[${index}].expenseMoney`" :rules="expenseApplyRules.expenseMoney" >
            <el-input v-model="item.expenseMoney"  placeholder="请填入报销金额"></el-input>
        </el-form-item>
        <el-form-item label="费用说明" prop="">
            <el-input v-model="item.costsAxplain" placeholder="请填入费用说明"></el-input>
        </el-form-item>
        <el-form-item label="费用归属" prop="">
            <el-input v-model="item.costOfBelonging" placeholder="请选择费用归属"></el-input>
        </el-form-item>
        <el-form-item label="附件上传" prop="" style="width:30%;">
            <el-upload
                class=""
                action="#"
                :before-upload="beforeLogoUpload"
                :http-request="uploadFile"
                :on-remove="handleRemove"
                :file-list="item.fileList"
            >
                <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
        </el-form-item>
        <el-divider v-if="index != expenseApplyData.expenseDetailList.length -1"></el-divider>
    </div>

    <el-form-item label="" prop="">
        <el-button type="primary"  @click="addExpenseDetail()" style="width: 100%;">添加报销明细</el-button>
    </el-form-item>

    <el-form-item label="总报销金额" prop="totalMoney">
        <el-input v-model="expenseApplyData.totalMoney" :readonly="true"></el-input>
    </el-form-item>
</el-form>

2.script

export default {
    data() {
        let checkExpenseMoney = (rule, value, callback) => {
            debugger;
            if (!value) {
                return callback(new Error('报销金额不能为空!'));
            }
            setTimeout(() => {
                if (!/^[0-9]+(.[0-9]{1,2})?$/.test(value) ||  !(value-0)>0) {
                    return callback(new Error('报销金额必须大于0且最多两位小数!'));
                }
                callback();
            }, 500);
        };
        return {
            prefix:'workflowApply',
            dialogFormVisible:false,
            workflowApplyData:{
                programId:''
            },
            expenseApplyData:{
                orderId:'',
                projectId:'',
                expenseAccount:'',
                expenseDetailList:[
                    {
                        costsDetails:'',
                        expenseMoney:'',
                        costsAxplain:'',
                        costOfBelonging:'',
                        fileList: []//{name: '', url: ''}
                    }
                ],
                // costsDetails:'',
                // expenseMoney:'',
                // costsAxplain:'',
                // costOfBelonging:'',
                // fileList: []//{name: '', url: ''}
                totalMoney:''
            },
            programList:[],
            expenseApplyRules:{
                projectId: [
                    { required: true, message: "项目号不能为空", trigger: "blur" }
                ],
                expenseAccount: [
                    { required: true, message: "报销人不能为空", trigger: "blur" }
                ],
                costsDetails: [
                    { required: true, message: "费用事由不能为空", trigger: "blur" }
                ],
                expenseMoney: [
                    { required: true,validator: checkExpenseMoney, trigger: "blur" }
                ],
                totalMoney: [
                    { required: true, message: "报销总金额不能为空", trigger: "blur" }
                ]
            },
            status:{
                loading:false
            }
        };
    },