antdv多重表单校验,可动态新增表单内字段的长度

2022-03-11  本文已影响0人  yaowangcje
form: {
  links: {
    aliexpress: [{ value: '' }],
    alibaba: [{ value: '' }]
  }
}

<a-form-model
  ref="form"
  :rules="rules"
  :model="form"
>
  <div class="product-box links">
    <a-form-model-item label="速卖通" required>
      <a-form-model-item v-for="(item, tKey) in form.links.aliexpress"
        :prop="'links.aliexpress.' + tKey + '.value'"
        :key="'aliexpress-' + tKey"
        label=""
        :rules="{
          required: true,
          message: '链接不能为空',
          trigger: 'blur',
        }"
      >
      <a-input v-model="item.value"></a-input>
      <a-button
        type="link"
        block
        @click="add('aliexpress', tKey)"
      >
        <a-icon type="plus-square" />
      </a-button>
    </a-form-model-item>
  </a-form-model-item>
  <a-form-model-item
    label="阿里巴巴"
    required
    :wrapperCol="{ span: 21 }"
  >
    <a-form-model-item
      :prop="'links.alibaba.' + tKey + '.value'" v-for="(item, tKey) in form.links.alibaba"
      :key="'alibaba-' + tKey"
      label=""
      :rules="{
        required: true,
        message: '链接不能为空',
        trigger: 'blur',
      }"
    >
      <a-input v-model="item.value"></a-input>
      <a-button
        type="link"
        block
        @click="add('alibaba', tKey)"
      >
        <a-icon type="plus-square" />
      </a-button>
    </a-form-model-item>
  </a-form-model-item>
</a-form-model>

上一篇下一篇

猜你喜欢

热点阅读