antd校验动态表单

表单新增一条相当于在数组中新增一条。其实本质是校验数组中每一项的数据。

<a-form
    ref="form"
    :model="form"
    :rules="rules"
>
    <a-row v-for="(item,index) in form" :key="index">
        <a-form-item label="表单编码:" :name="[index, 'code']" :rules="rules.code">
            <a-input v-model:value="item.code" />
        </a-form-item>

        <a-button type="link" class="btnAdd" @click="addItem">
            <PlusCircleOutlined />
        </a-button>
    </a-row>
</a-form>

form: [{ code: '' }, { code: '' }],
rules: {
    code: [{ required: true, message: '请输入表单编码', type: 'string', trigger: 'blur' }]
}

主要的就是：

:name="[index, 'code']"
校验的字段为：{message: '请输入···', field: '1.code'}

转发请备注出处

---

【公众号：缃言的调调】