最近在写毕设时，我遇到了做出动态增减表单这一需求，但在实现的过程中遇到了不少问题，接下来主要记录动态表单修改问题的解决过程。
一、动态表单的添加和删除
这里添加和删除的实现不难，参考 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++
}
//根据非空值预加载对应数量的输入框后，将后端传来的值分别赋到对应的输入框中
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 之后，再次点击修改就会出现如下问题：
多出了下面一大堆输入框，dialog 没有被初始化。
解决方案：在点击取消按钮时，强制刷新一次当前页面即可。
代码：location.reload()
关于动态增减表单的修改，如果还有更好的解决方案，欢迎各位大佬在评论区分享。
