###
Vue3 + Ant Design
动态表单实现方法
以下是一个使用
Vue3 和 Ant Design 实现
动态表单的完整示例，支持
动态添加和删除
表单项。
#### 1.
动态表单的基本结构
动态表单的核心在于通过数组存储
表单项，并结合 `v-for` 指令渲染多个
表单项。每个
表单项可以通过索引进行唯一标识，从而实现
动态增删功能[^1]。
#### 2. 示例代码
```
vue
<template>
<a-
form :model="
formState" layout="vertical">
<div v-for="(item, index) in
formState.items" :key="index" class="
form-item">
<a-row :gutter="16">
<a-col :span="10">
<a-
form-item label="字段名称">
<a-input v-model:value="item.name" placeholder="请输入字段名称" />
</a-
form-item>
</a-col>
<a-col :span="10">
<a-
form-item label="字段
值">
<a-input v-model:value="item.value" placeholder="请输入字段
值" />
</a-
form-item>
</a-col>
<a-col :span="4">
<a-button type="danger" @click="remove
FormItem(index)">删除</a-button>
</a-col>
</a-row>
</div>
<a-button type="primary" style="margin-top: 16px;" @click="add
FormItem">新增字段</a-button>
</a-
form>
</template>
<script setup lang="ts">
import { reactive }
from "
vue";
// 定义
表单状态
const
formState = reactive({
items: [
{ name: "", value: "" },
],
});
// 添加
表单项
const add
FormItem = () => {
formState.items.push({ name: "", value: "" });
};
// 删除
表单项
const remove
FormItem = (index: number) => {
if (
formState.items.length > 1) {
formState.items.splice(index, 1);
}
};
</script>
<style scoped>
.
form-item {
margin-bottom: 16px;
}
</style>
```
#### 3.
动态表单的校验规则
为了确保
动态表单的每个字段都符合要求，可以为 `a-
form` 添加校验规则。以下是实现方式：
```
vue
<template>
<a-
form :model="
formState" :rules="rules" ref="
formRef" layout="vertical">
<div v-for="(item, index) in
formState.items" :key="index" class="
form-item">
<a-row :gutter="16">
<a-col :span="10">
<a-
form-item label="字段名称" :name="`items.${index}.name`" :rules="rules.name">
<a-input v-model:value="item.name" placeholder="请输入字段名称" />
</a-
form-item>
</a-col>
<a-col :span="10">
<a-
form-item label="字段
值" :name="`items.${index}.value`" :rules="rules.value">
<a-input v-model:value="item.value" placeholder="请输入字段
值" />
</a-
form-item>
</a-col>
<a-col :span="4">
<a-button type="danger" @click="remove
FormItem(index)">删除</a-button>
</a-col>
</a-row>
</div>
<a-button type="primary" style="margin-top: 16px;" @click="add
FormItem">新增字段</a-button>
<a-button type="success" style="margin-top: 16px;" @click="submit
Form">提交</a-button>
</a-
form>
</template>
<script setup lang="ts">
import { reactive, ref }
from "
vue";
import {
FormInstance }
from "ant-design-
vue";
const
formRef = ref<
FormInstance | null>(null);
const
formState = reactive({
items: [
{ name: "", value: "" },
],
});
const rules = {
name: [{ required: true, message: "请输入字段名称", trigger: "blur" }],
value: [{ required: true, message: "请输入字段
值", trigger: "blur" }],
};
const add
FormItem = () => {
formState.items.push({ name: "", value: "" });
};
const remove
FormItem = (index: number) => {
if (
formState.items.length > 1) {
formState.items.splice(index, 1);
}
};
const submit
Form = () => {
formRef.value?.validate().then(() => {
console.log("
表单数据:",
formState.items);
}).catch((error) => {
console.log("验证错误:", error);
});
};
</script>
<style scoped>
.
form-item {
margin-bottom: 16px;
}
</style>
```
#### 4. 关键点解析
- **
动态生成
表单项**：通过 `v-for` 循环渲染
表单项，并为每个
表单项绑定唯一的 `key`
值。
- **
动态校验规则**：利用 Ant Design 的 `rules` 属性为每个字段定义校验规则，并通过 `name` 属性指定路径[^2]。
- **
表单提交**：调用 `
formRef.value?.validate()` 方法触发
表单校验，校验通过后获取
表单数据。
#### 5. 扩展功能
如果需要支持更复杂的
动态表单功能，例如：
- **批量删除**：可以通过多选框选择多个条目后进行批量移除。
- **拖拽排序**：引入第三方库（如 `Sortable
JS`）实现
表单项的拖拽排序。
- **自定义组件**：将
表单项封装为独立组件，便于复用和维护[^3]。
---
本文介绍了一种在React中遇到的常见错误：“_this.propsisundefined”和“Youcannotsetaformfieldbeforerenderingafieldassociatedwiththevalue”。提供了一个简单而有效的解决方案，通过使用setTimeout异步设置表单字段值，避免了直接在渲染前设置值的问题。
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
