vue + element-ui 动态增减表单的添加、删除和修改问题_element动态增减表单项

最近在写毕设时，我遇到了做出动态增减表单这一需求，但在实现的过程中遇到了不少问题，接下来主要记录动态表单修改问题的解决过程。

一、动态表单的添加和删除

这里添加和删除的实现不难，参考 Element 官方文档即可。

地址：组件 | Element（在 Form 表单 中找到 动态增减表单项）

二、动态表单的修改

前期

由于我刚上手 vue 不久，所以对我来说这里是一个难点。

我的需求是：用户根据自身需要在弹出的 dialog 中添加了 a 个输入框并向其填写数据提交给后端之后，在点击修改时，弹出的 dialog 不仅要将这一行的用户数据回显，还要将这 a 个输入框加载出来，并且不影响和动态表单绑定按钮的事件的触发。

举个例子：我向 dialog 中动态添加了 5 个输入框并填写了数据提交给后端之后，点击修改时，就要加载出这 5 个输入框和数据。

数据回显的实现并不难，只要从后端获取到当前数据所在行并赋值即可。

问题是如何加载出对应数量的输入框。

---

中期

我尝试直接将输入框的数量设置固定值：

this.dynamicForm.inputColumns = 6

但发现由于我写的添加和修改动态表单在一个 dialog 中进行，这时候点击修改，删除 和 添加 按钮绑定的事件无法触发。

后来尝试从网上寻找其他方法，最后也没能找到。

---

后期

就在昨晚入梦前，我想到了一个做法。

在动态表单项添加时，我用到了这一段代码：

//添加输入框
this.dynamicForm.inputColumns.push({
    value: '',
    // v-for 的 key 值用当前时间戳来设定
    key: Date.now()
});

它的功能演示如下：

我的想法是：利用这段代码，在点击修改时根据提交的 输入框个数 和 输入框的值 进行判断，如果是非空值，则执行一次上面的代码。这样就实现了对应数量的输入框的加载。

点击修改时，在 methods 中添加 handleModify 方法，代码如下：

//修改表单数据时打开对话框，并加载对应组件、回显对应数据
handleModify(row) {
    //弹出对话框
    this.dialogFormVisible = true
    //将该行对应的数据赋值
    this.dynamicForm.project_name = row.project_name
    this.dynamicForm.project_leader_phone = row.project_leader_phone
    this.dynamicForm.project_progress = row.project_progress

    //定义一个数组和计数变量，用来接收后端返回的数据
    var temp = []
    var index = 1
    //将后端的数据分别赋值
    temp[1] = row.project_member2_phone
    temp[2] = row.project_member3_phone
    temp[3] = row.project_member4_phone
    temp[4] = row.project_member5_phone
    temp[5] = row.project_member6_phone
    while (index < 6) {
        //如果该值不为空
        if (temp[index] != "") {
            //添加输入框
            this.dynamicForm.inputColumns.push({
                value: '',
                // v-for 的 key 值用当前时间戳来设定
                key: Date.now()
            });
        }
        //计数值自增，直到跳出该循环为止
        index++


##### 框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，**生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的**，在学习的过程可以结合框架的官方文档



**Vue框架**

>**知识要点：**
>**1. vue-cli工程**
>**2. vue核心知识点**
>**3. vue-router**
>**4. vuex**
>**5. http请求**
>**6. UI样式**
>**7. 常用功能**
>**8. MVVM设计模式**

![](https://img-blog.csdnimg.cn/img_convert/a8f6152fa361f198df06a97be7825f23.webp?x-oss-process=image/format,png)


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

![](https://img-blog.csdnimg.cn/img_convert/1607b501d877e4e76080cfcad69811a4.webp?x-oss-process=image/format,png)

806664)]


**React框架**

>**知识要点：**
>**1. 基本知识**
>**2. React 组件**
>**3. React Redux**
>**4. React 路由**

[外链图片转存中...(img-w7SeQjGX-1718020806665)]