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

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

以 Vue 为例，我整理了如下的面试题。

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

//添加输入框
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++
    }
    //根据非空值预加载对应数量的输入框后，将后端传来的值分别赋到对应的输入框中
    this.dynamicForm.inputColumns[0].value = row.project_member1_phone
    this.dynamicForm.inputColumns[1].value = row.project_member2_phone
    this.dynamicForm.inputColumns[2].value = row.project_member3_phone
    this.dynamicForm.inputColumns[3].value = row.project_member4_phone
    this.dynamicForm.inputColumns[4].value = row.project_member5_phone
    this.dynamicForm.inputColumns[5].value = row.project_member6_phone
}

关于这一段代码的功能演示如下：

添加了 6 个输入框并提交后点击 修改 ：

添加了 3 个输入框并提交后点击 修改：

以下是 template 标签 和 data 对应的部分代码：

<!-- template 中的部分 -->
<el-form-item v-for="(input, index) in dynamicForm.inputColumns" :label="'成员' + (index + 1) + '电话'" 
:key="input.key" :prop="'inputColumns.' + (index + 1) + '.value'">
    <el-input v-model="input.value" style="width: 280px;" placeholder="请输入项目成员电话号码"></el-input>
    <el-button type="danger" @click.prevent="removeInput(input)">删 除 
        <i class="el-icon-remove-outline"></i>
    </el-button>
</el-form-item>

<!-- data 中的部分 -->
<script>
export default {
    data() {
        return: {
            dynamicForm: {
                //声明一个数组管理动态增减表单
                inputColumns: [
                    {value: ''}
                ],
            },
        }
    },
}
</script>

三、实现后遇到的问题

以上功能实现后，在对这一块进行功能测试的过程中，遇到了问题。

当你点击修改弹出 dialog ，再点击取消关闭 dialog 之后，再次点击修改就会出现如下问题：

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。