ant-design动态增减 form 表单

业务场景: 通过点击增加按钮,可以动态增加一列表单项,点击删除,删除此项

代码githup地址: https://github.com/shengbid/vue3-vite-demo/tree/main/src/views/form/mutilForm

但是 最后的提交按钮是在父页面,点击提交时,需要拿到子组件 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 表单的动态增减了