ant-design动态增减 form 表单
业务场景: 通过点击增加按钮,可以动态增加一列表单项,点击删除,删除此项
![](https://img2023.cnblogs.com/blog/1349812/202302/1349812-20230212210551046-753319112.jpg)
但是 最后的提交按钮是在父页面,点击提交时,需要拿到子组件 form 表单数据, 一般的,父组件想要拿到子组件的数据,需要给子组件设置一个 ref, 不过这里的子组件是动态的,ref 不能动态赋值
看了 antdesign 中 form 表单里面的动态增减项,是用一个 form 包裹,里面循环
根据这个方法,结合自己的组件,修改了一下写法
子组件 order.vue
验证的核心就是 :name 这里的参数, 如果是单个表单, name=“当前项的名称”
列表中,需要告知是第几行的数据 [‘数组名’, ‘index’, ‘参数名’] list[0].name 这样就能验证了
<template> <div class="order">
<p>序号: {{ order + 1 }}</p>
<a-button type="primary" @click="deleteTable">删除</a-button> <a-form-item label="名称" :name="['formList', order, 'name']" // 注意这里的name组成, 第一项是这个data数组列表的数据名称, 第二项是数组列表的index, 第三项是当前项表单的名称 :rules="rules.name" > <a-input v-model:value="form.name" /> // v-model我项目这里要加:value,根据你项目里的写法 </a-form-item> <a-form-item label="年龄" :name="['formList', order, 'age']" :rules="rules.age" > <a-input-number v-model:value="form.age" style="width: 100%" /> </a-form-item> <a-form-item label="日期" :name="['formList', order, 'date']" :rules="rules.date" > <a-date-picker v-model:value="form.date" value-format="YYYY-MM-DD" style="width: 100%" /> </a-form-item> </div> </template> <script> import { ref } from "vue"; export default { props: { order: { // 表单序号 type: Number, default: 0, }, form: { // 每一项表单 type: Object, default: () => {}, }, }, setup(props, { emit }) { const formRef = ref(null); const rules = { name: [{ required: true, message: "请输入名称", trigger: "blur" }], age: [{ required: true, message: "请输入年龄", trigger: "blur" }], date: [{ required: true, message: "请选择日期", trigger: "change" }], }; const deleteTable = () => { emit("deleteTable", props.order); }; return { deleteTable, rules, formRef, }; }, }; </script> <style> .order { margin-top: 15px; background: wheat; padding: 12px; } </style>
父组件 index.vue
<template> <div> <h3>动态增减表单</h3> <a-button type="primary" @click="addTable">新增</a-button> <a-form ref="formRef" name="dynamic_form_item" :model="info" :label-col="{ span: 5 }" :wrapper-col="{ span: 10 }" > <order @deleteTable="deleteTable" :order="i" v-for="(item, i) in formList" :form="item" /> </a-form> <div class="submit" v-show="formList.length"> <a-button type="primary" @click="submit">提交</a-button> </div> </div> </template> <script> import { reactive, ref, toRefs } from "vue"; import Order from "./components/order.vue"; import { message } from "ant-design-vue"; export default { components: { Order, }, setup() { const info = reactive({ formList: [], // 这个formList就是子组件里name的第一项, }); const formRef = ref(null); const addTable = () => { info.formList.push({ name: "", age: null, date: "", }); }; const deleteTable = (key) => { info.formList.splice(key, 1); }; const submit = () => { formRef.value.validateFields().then(() => { console.log(info.formList); message.success("success"); }); }; return { info, ...toRefs(info), addTable, deleteTable, submit, formRef, }; }, }; </script> <style> .submit { text-align: right; margin-top: 20px; } </style>
这个在可编辑表格里也是一样的用法
注意 form-item 中 name 的值就可以了
最后在提交时,调用 form 验证方法,就能实现 form 表单的动态增减了