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

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

key: Date.now()

});

它的功能演示如下：


![](https://img-blog.csdnimg.cn/direct/491cef2dc3894d5688782c17381b5fc5.gif)


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


点击修改时，在 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 个输入框并提交后点击 修改 ：![](https://img-blog.csdnimg.cn/direct/20e2b9475c8b4ba59d8c1cc78b80f67b.gif)



添加了 3 个输入框并提交后点击 修改：![](https://img-blog.csdnimg.cn/direct/e3275b4189fb461d8d36dfb148357a56.gif)


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

<el-button type=“danger” @click.prevent=“removeInput(input)”>删 除

## 三、实现后遇到的问题


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


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


![](https://img-blog.csdnimg.cn/direct/66d8f2a74dde4efdbfa643cf41129c2e.jpeg)


多出了下面一大堆输入框，dialog 没有被初始化。


解决方案：在点击取消按钮时，强制刷新一次当前页面即可。


代码：location.reload()


### 最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。





大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。