ant-design vue3中form表单动态数组字段校验

最新推荐文章于 2024-10-12 11:48:09 发布

阿阿阿尔呀

最新推荐文章于 2024-10-12 11:48:09 发布

阅读量377

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/aerbaba/article/details/140616348

版权

<Form :model="formData" ref="formRef">
   <FormItem
        :name="['rewardList', index, 'person']"
        class="w-24 mb-0 ml-1 mr-4 inline-block align-middle"
        :rules="integerRuleOne()"
    >
            <InputNumber
                 :placeholder="t('common.inputText')"
                 v-model:value="item.person"
            />
   </FormItem>
    <FormItem
        :name="['rewardList', index, 'present']"
        class="w-24 mb-0 ml-1 mr-4 inline-block align-middle"
        :rules="integerRuleOne()"
    >
            <InputNumber
                 :placeholder="t('common.inputText')"
                 v-model:value="item.present"
            />
   </FormItem>
</Form>

<script lang="ts" setup>
    const formData = reactive({
        rewardList: [
          {
            person: '',
            present: '',
          },
        ],
    });
    const formRef = ref();
    function handleSubmit() {
        formRef.value.validate().then( (res) => {
            console.log(res);
        });
    }
</script>