【管理后台】动态表单创建

动态表单（基于 Ant Design Vue 1.x）

1.实现以下效果

2.示例代码如下：

  <a-button
    type="primary"
    class="page-work-create-btn"
    @click="addDomain"
  >
    创建
  </a-button>
  <a-form-model
    v-for="(f, index) in dynamicValidateForms"
    :key="f.key"
    :ref="`dynamicValidateForms${index}`"
    :model="f"
    v-bind="formItemLayout"
  >
     <!-- 删除按键 -->
    <a-icon
      class="dynamic-delete-button"
      type="minus-circle-o"
      @click="removeDomain(f)"
    />
    <!-- 任务名称 -->
    <a-form-model-item
      :label="'姓名'"
      :prop="'name'"
      :rules="[
        {
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }
      ]"
    >
      <a-input v-model="f.name" placeholder="请输入姓名" />
    </a-form-model-item>
    <!-- 日期选择 -->
    <a-form-model-item
      :label="'睡觉时间'"
      :prop="'signTime'"
      :rules="[
        {
          required: true,
          message: '请选择' + TimeName
        },
        {
          // 自定义校验规则
          validator: (rule, value, callback) => {
            if (value.length === 2) {
              if (!value[0] || !value[1]) {
                callback('请选择' + TimeName)
              } else {
                // callback不传参数表示校验通过
                callback()
              }
            } else {
              callback('请选择' + TimeName)
            }
          }
        }
      ]"
    >
      <a-range-picker v-model="f.signTime" format="YYYY-MM-DD">
        <a-icon slot="suffixIcon" type="smile" />
      </a-range-picker>
    </a-form-model-item>
    <!-- 累计个数 -->
    <a-form-model-item
      v-if="tabsSelect_index === 3 || tabsSelect_index === 4"
      :label="'水果'"
      :prop="'threshold'"
      :rules="[
        {
          required: true,
          message: '请输入个数',
          trigger: 'blur'
        }
      ]"
    >
      <a-input
        v-model="f.threshold"
        placeholder="请输入个数"
        suffix="个"
        @input="
          e =>
            (name = validForbid(
              e,
              dynamicValidateForms[index],
              'threshold'
            ))
        "
      />
    </a-form-model-item>
    <!-- 维生素-->
    <a-form-model-item
      :label="'可获得'"
      :prop="'lucky_value'"
      :rules="[
        {
          required: true,
          message: '请输入维生素',
          trigger: 'blur'
        }
      ]"
    >
      <a-input
        v-model="f.lucky_value"
        placeholder="请输入维生素"
        suffix="维生素"
        @input="
          e =>
            (name = validForbid(
              e,
              dynamicValidateForms[index],
              'lucky_value'
            ))
        "
      />
    </a-form-model-item>
    <!-- 说明文案 -->
    <a-form-model-item
      :label="'说明文案'"
      :prop="'body'"
      :rules="{
        required: true,
        message: '请输入说明文案',
        trigger: 'blur'
      }"
    >
      <a-input v-model="f.body" placeholder="请输入说明文案" />
    </a-form-model-item>
    <a-divider />
  </a-form-model>
</div>