<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最简单
标签：evel,rules,校验,value,trigger,blur,table,row From： https://www.cnblogs.com/lsc-boke/p/18074858