### 在 Vue3 中使用 `<script setup>` 实现动态删除 a-form 表单的功能 在 Vue3 的 `<script setup>` 语法中，可以实现动态表单的增删功能。以下是一个完整的示例，展示如何通过绑定数据到表单，并提供动态添加和删除条目的功能。 ```vue <template> <a-form :model="form" layout="vertical"> <a-table :dataSource="form.items" :columns="columns" bordered> <template #bodyCell="{ column, record, index }"> <template v-if="column.dataIndex === 'description'"> <a-form-item :name="`items.${index}.description`"> <a-input v-model:value="record.description" placeholder="请输入描述" /> </a-form-item> </template> <template v-else-if="column.dataIndex === 'quantity'"> <a-form-item :name="`items.${index}.quantity`"> <a-input-number v-model:value="record.quantity" placeholder="请输入数量" /> </a-form-item> </template> <template v-else-if="column.dataIndex === 'action'"> <a-button type="danger" @click="removeFormItem(index)">删除</a-button> </template> </template> </a-table> <a-button type="primary" style="margin-top: 16px;" @click="addFormItem">新增条目</a-button> </a-form> </template> <script setup lang="ts"> import { reactive } from "vue"; import { FormInstance } from "ant-design-vue"; const form = reactive({ items: [ { description: "", quantity: undefined }, ], }); const columns = [ { title: "描述", dataIndex: "description", key: "description" }, { title: "数量", dataIndex: "quantity", key: "quantity" }, { title: "操作", dataIndex: "action", key: "action" }, ]; const addFormItem = () => { form.items.push({ description: "", quantity: undefined }); }; const removeFormItem = (index: number) => { if (form.items.length > 1) { form.items.splice(index, 1); // 删除指定索引的表单项[^1] } }; </script> ``` #### 代码说明 - 使用 `reactive` 创建响应式对象 `form`，其中包含一个数组 `items` 用于存储表单条目。 - `columns` 定义表格列的结构，包括“描述”、“数量”和“操作”三列。 - 动态生成表单项时，通过 `v-model:value` 绑定到对应的字段。 - 点击“删除”按钮时调用 `removeFormItem` 方法，该方法会根据索引删除对应的数据项。 - 点击“新增条目”按钮时调用 `addFormItem` 方法，向 `form.items` 数组中添加一个新的对象。 #### 验证规则 为了确保表单字段的有效性，可以为每个字段添加验证规则。例如： ```typescript const rules = { description: [{ required: true, message: "请输入描述", trigger: "blur" }], quantity: [{ required: true, message: "请输入数量", trigger: "blur" }], }; ``` 将这些规则绑定到 `a-form` 的 `rules` 属性中，以实现动态验证[^3]。 #### 注意事项 - 如果需要支持批量删除，可以通过复选框选择多个条目后进行批量移除。 - 在动态表单中，确保每个字段都有唯一的 `name` 属性，以便正确触发验证逻辑。 - 使用 `<script setup>` 时，避免直接导出模块，而是通过 `reactive` 和 `ref` 等组合式 API 来管理状态[^4]。