美文网首页
antdv多重表单校验,可动态新增表单内字段的长度

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

作者: yaowangcje | 来源:发表于2022-03-11 11:16 被阅读0次
    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>
    
    

    相关文章

      网友评论

          本文标题:antdv多重表单校验,可动态新增表单内字段的长度

          本文链接:https://www.haomeiwen.com/subject/pppcdrtx.html