element 动态增减表单项（附加必填验证）

页面结构

  <div
        v-for="(domain, index) in form.domains"
        :key="domain.key"
        class="flex-box"
      >
        <el-form-item
          :prop="'domains.' + index + '.startTime'"
          :rules="{
            required: true,
            message: '开始时间不能为空',
            trigger: 'change'
          }"
          :label="`营业时间${index + 1}`"
        >
          <el-time-picker
            placeholder="起始时间"
            v-model="domain.startTime"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>
        <span style="margin:10px"> - </span>

        <el-form-item
          :prop="'domains.' + index + '.endTime'"
          :rules="{
            required: true,
            message: '结束时间不能为空',
            trigger: 'change'
          }"
          label-width="0"
        >
          <el-time-picker
            placeholder="起始时间"
            v-model="domain.endTime"
            format="HH:mm"
            value-format="HH:mm"
          >
          </el-time-picker>
        </el-form-item>

        <span style="margin-bottom:22px;margin-left:20px"
          ><i
            class="el-icon-circle-plus-outline icon"
            @click="addDomain"
            style="font-size:36px;"
          ></i>
          <i
            class="el-icon-remove-outline icon"
            @click="removeDomain(domain)"
            v-if="form.domains.length > 1"
            style="font-size:36px"
          ></i>
        </span>
      </div>

事件

    // section 1-1 动态 删除 营业时间表单项
    removeDomain (item) {
      var index = this.form.domains.indexOf(item)
      if (index !== -1) {
        this.form.domains.splice(index, 1)
      }
    },
    // section 1-3 动态 增加 营业时间表单项
    addDomain () {
      if (this.form.domains.length === 3) {
        this.$message.warning('最多只能添加 3 条营业时间')
      } else {
        this.form.domains.push({
          startTime: '',
          endTime: '',
          key: Date.now()
        })
      }
    },

data

const form = {
  name: '',
  address: '',
  des: '',
  serviceNumMeal: '',
  domains: [{ startTime: '', endTime: '' }]
}

页面效果如下