vue2+ant 动态添加表单

在 Vue2 中结合 Ant Design (AntV) 动态添加表单，可以创建一个可扩展的表格组件，其中包含了动态生成的表单元素。以下是一个简单的步骤描述：

1. **安装依赖**：
首先确保已经安装了 Vue、Vue Router 和 Element UI 或者 Ant Design Vue 组件库。

npm install vue antd @vue/cli-plugin-element

2. **引入并配置**：
在你的 Vue 文件中，通过 `import` 引入 Ant Design 的 Table 和 Form 组件，并在 Vue 实例的 `setup` 函数中初始化它们。

import { createApp } from 'vue';
import { Table, Form, Input, Button } from 'ant-design-vue';

const app = createApp(App);
app.use(Table);
app.use(Form);
//...

3. **数据结构设计**：
定义一个包含字段名、默认值等信息的对象数组，用于存储动态表单的数据。

export default {
  data() {
    return {
      formItems: [
        {
          name: 'field1',
          label: 'Field 1',
          type: 'input', // 可选值如 input, textarea, select 等
          initialValue: '',
        },
        // 更多动态项...
      ],
    };
  }
};

4. **模板编写**：
使用 Vue 的 v-for 循环遍历 `formItems` 数组，动态渲染每个表单字段。

<template>
  <div>
    <Table :columns="tableColumns" :data="dynamicForms"></Table>
    <!-- 添加表单按钮 -->
    <Button type="primary" @click="addFormItem">新增表单项</Button>

    <!-- 表单部分，使用 keep-alive 缓存已添加的表单 -->
    <keep-alive>
      <Form v-for="(item, index) in dynamicForms" :key="index">
        <FormItem :label="item.label" :rules="[...]" :prop="item.name">
          <Input v-model="item.value" />
        </FormItem>
        <!-- 删除按钮 -->
        <Button type="ghost" @click="removeFormItem(index)">删除</Button>
      </Form>
    </keep-alive>
  </div>
</template>

5. **事件处理函数**：
创建 addFormItem 和 removeFormItem 方法来增加或移除表单条目。

methods: {
  addFormItem() {
    this.formItems.push({
      ...this.formItems[this.formItems.length - 1], // 使用最后一个项作为模板
      value: '', // 新增表单的初始值
    });
  },
  removeFormItem(index) {
    this.$delete(this.dynamicForms, index);
  },
}

6. **其他细节**：
- 根据实际需要调整表头 `tableColumns`，如列标题、操作列等。
- 根据表单字段类型选择适当的 Vue 插件（比如 Select 选择器）。