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
            }
        };
    },