antdv多重表單校驗,可動態(tài)新增表單內(nèi)字段的長度

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>

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容