vue3,elementui-plus动态表单多层级校验

开发场景：

数据结构如下：

页面渲染：

增删代码：

页面代码：

<el-form ref="form" :model="appointmentform" label-width="80px">

<template v-for="(val, index) in appointmentform" :key="index">

<el-form-item

label="选择日期"

:prop="index + '.maaDate'"

:rules="{

required: true,

message: '请选择选择日期',

trigger: 'change',

}"

>

<el-row class="el-width">

<el-col :span="17">

<el-date-picker

class="date-picker"

:disabled-date="forbiddenTime"

v-model="val.maaDate"

:disabled="val.id ? true : false"

value-format="YYYY-MM-DD"

:type="val.id ? 'date' : 'daterange'"

range-separator="-"

start-placeholder="开始日期"

end-placeholder="结束日期"

>

</el-date-picker>

</el-col>

<el-col :span="7">

<el-button

type="primary"

@click="addData"

:disabled="val.id ? true : false"

>添加日期</el-button

>

<el-button

type="danger"

@click="delData(index)"

:disabled="appointmentform.length == '1'"

>删除</el-button

>

</el-col>

</el-row>

</el-form-item>

<el-form-item

label="时段"

v-for="(item, d) in val.maaDateItemList"

:key="d"

>

<el-row class="el-width" :gutter="8">

<el-col :span="5">

<el-form-item

label=""

:prop="`${index}.maaDateItemList.${d}.startTime`"

:rules="{

// required: true,

// validator: checkOvertime,

// trigger: 'change',

required: true,

message: '请选择起始时间',

trigger: 'change',

}"

>

<el-time-select

placeholder="起始时间"

v-model="item.startTime"

v-if="d == 0"

:disabled="item.id ? true : false"

:picker-options="{

start: '08:00',

step: '00:30',

end: '24:00',

}"

>

</el-time-select>

<el-time-select

v-else

placeholder="起始时间"

v-model="item.startTime"

:min-time="d > 0 ? val.maaDateItemList[d - 1].endTime : ''"

:disabled="item.id ? true : false"

:picker-options="{

start: '08:00',

step: '00:30',

end: '24:00',

}"

>

</el-time-select>

</el-form-item>

</el-col>

--

<el-col :span="5">

<el-form-item

label=""

:prop="`${index}.maaDateItemList.${d}.endTime`"

:rules="{

required: true,

message: '请选择结束时间',

trigger: 'change',

}"

>

<el-time-select

placeholder="起始时间"

v-model="item.endTime"

:min-time="item.startTime"

:disabled="item.id ? true : false"

:picker-options="{

step: '00:60',

step: '00:30',

end: '24:00',

}"

>

</el-time-select>

</el-form-item>

</el-col>

<el-col :span="7">

<el-input-number

v-model="item.totalNumber"

:min="1"

:disabled="item.id ? true : false"

:max="9999999999"

controls-position="right"

/>

</el-col>

<el-col :span="6">

<el-button

type="danger"

@click="delHour(index, ind)"

:disabled="

val.maaDateItemList.length == '1' || val.id ? true : false

"

>删除</el-button

>

</el-col>

</el-row>

</el-form-item>

<el-button icon="el-icon-plus" class="addHour" @click="addHour(index)"

>添加时段</el-button

>

</template>

</el-form>