evel()与table里面循环校验器的结合使用

<el-form :rules="rules" ref="formTableRef" :model="formTable" label-position="top" label-width="100px">
            <el-table :data="formTable.tableData" style="width: 100%">
                <el-table-column prop="month" align="center" label="月份">
                    <template #default="{ row }">
                        <span>{{ row.month }}月</span>
                    </template>
                </el-table-column>
                <el-table-column prop="startDate" align="center" label="开始日期">
                    <template #default="{ row, $index }">
                        <el-form-item :prop="`tableData[${$index}].startDate`" :rules="rules.startDate" :label-width="1">
                            <el-date-picker
                                style="width: 100%"
                                type="date"
                                :clearable="false"
                                @change="changeStartDate(row)"
                                value-format="YYYY-MM-DD"
                                v-model="row.startDate"
                                placeholder="请选择时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="endDate" align="center" label="结束日期">
                    <template #default="{ row, $index }">
                        <el-form-item :prop="`tableData[${$index}].endDate`" :rules="rules.endDate" :label-width="1">
                            <el-date-picker
                                style="width: 100%"
                                type="date"
                                @change="changeStartDate(row)"
                                :clearable="false"
                                value-format="YYYY-MM-DD"
                                v-model="row.endDate"
                                placeholder="请选择时间"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="costDays" align="center" label="总天数(天)">
                    <template #default="{ row }">
                        <span>{{ row.costDays ? row.costDays : "/" }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="effectiveDays" align="center" label="工作天数(天)">
                    <template #default="{ row, $index }">
                        <el-form-item :prop="`tableData[${$index}].effectiveDays`" :rules="rules.effectiveDays" :label-width="1">
                            <el-input v-model="row.effectiveDays" @blur="changeWorkDay(row)" placeholder="请填写天数"> </el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column prop="effectiveHours" align="center" label="有效时间(小时)">
                    <template #default="{ row }">
                        <span>{{ row.effectiveHours ? row.effectiveHours : "/" }}</span>
                        <!-- <span>{{ row.effectiveDays ? parseFloat(row.effectiveDays) * 8 : "/" }}</span> -->
                    </template>
                </el-table-column>
            </el-table>
        </el-form>

const rules = {
    startDate: [
        {
            required: true,
            message: "请选择时间",
            trigger: "blur"
        },
        { validator: testDate, trigger: "blur" }
    ],
    endDate: [
        {
            required: true,
            message: "请选择时间",
            trigger: "blur"
        }
    ],
    effectiveDays: [
        {
            required: true,
            message: "请填写天数",
            trigger: "blur"
        },
        { validator: rule.isZeroTwo, trigger: "blur" }
    ]
};

const testDate = (rules: any, value: any, callback: Function) => {
    if (!value) {
        return new Error("请输入内容");
    } else {
        console.log("rules", eval("formTable.value." + rules.field), formTable.value.tableData[1].startDate);
        console.log("value", value);
        console.log("callback", callback);
    }
};

重点是这个testDate里面，rules.field = "tableData[1].startDate"字符串，想要其与formTable.value.组合只能使用evel()，要么就是解析字符串，evel最简单

另外一种方式去实现效果为，下一个表格行的开始时间得大于上一个表格行的结束时间验证

const testDate = (rules: any, value: any, callback: Function) => {
    if (!value) {
        return new Error("请输入内容");
    } else {
        let b = rules.field;
        let start = b.indexOf("[");
        let end = b.indexOf("]");
        let index = b.substring(start + 1, end); // 获取 [] 中的数字
        if (index > 0) {
            const startDateCurr = new Date(formTable.value.tableData[index].startDate);
            const endDatePrev = new Date(formTable.value.tableData[index - 1].endDate);
            if (startDateCurr <= endDatePrev) {
                callback(new Error("须大于上月的结束时间"));
            } else {
                callback();
            }
        } else {
            callback();
        }
    }
};

 校验规则的坑:

场景：先清空里面的一个时间组件，然后添加年份了之后，下面的table全部清空，但是有校验标红

解决思路1:

nextTick(() => {
                    formTableRef.value.resetFields();
                });

解决思路2:给form表单里面通过v-if="show" 这个为true -false切换，

都得放到nextTick里面去