Vue中动态增加表单项的方法

在我的项目中遇到了两种动态增加表单项的场景，一种是对Form的添加，另外一种是对Table的添加。当初实现这两种时还有一点喜悦，现在回过头来看，发现这两种实际就是一种，以后就可以根据个人喜好选择了。

这里因为要添加的表单项存在着父子关系，要添加的子代很多，而父代属性又一致，用这种方式可以减少重复 *** 作。表单样式就不再赘述了，具体看图

这里 tab 就是我们每次添加子表单时要push进数组tabs的内容。

2、为添加要素按钮绑定一个 addTab() 方法，用于在每次添加子表单时，向数组中push一个元素

3、对表单项的编写与正常一样，只不过在数据绑定上不同，需绑定到tab中的元素

4、如果要删除多余tab，需要在 <div>中声明一个 removeTab() 的方法，来删除对应的tab，这点区别于 addTab() ，它是定义在 <div>之外的，每次新增的tab都会插到整个表单的末尾。

这里的table也是存在父子关系，只是展示形式的区别。因为后台的数据还有着展示的需要，所以才选用了表格这种形式来实现。

1、将table组件声明在一个 <template>标签下，用以根据后台数据进行动态加载。

2、对表格中需要编辑的内容，可以在 <template>标签下声明一个输入框，并使用插槽来实现数据的绑定。

3、与上面相同的，声明一个 addRow() 的方法，用于增加表格的行数。

4、删除不想要的行，需要对应增加一个 deleteRow() 方法

添加后的图片效果

1.关键：写一个标识数组（例如这个图表中的，以 日期 indexObj 为唯一标识，每个不一样的日期合并行数记录下来）

2.必要：监听表格数据（无深度监听）当表格数据添加行/删除行/复制时，都有表格数据的动态变化，从而计算标识

3.关键：合并行方法 objectSpanMethod({ row, columnIndex })

注意传值是 { ...this.rowObj } 我也不知道为什么传this.rowObj会造成数据乱，这也是一个对象啊？？？

步骤：

1.根据点击复制按钮行的信息，得到上一工作日Day

2.根据此Day，执行下面方法，得到上一工作日所有数据,此处Json转化，实际 *** 作中没有转换时，插入数据会乱掉。

3.改变标识，进行循环插入

用 v-for 指令根据一组数组的选项列表进行渲染。

通过数组的索引获取数组的数据

这种写法在数据很多的时候或者数据发生更新的时候处理就会很繁琐,

因此我们可以使用v-for指令来循环数组

基本数组的循环

v-for 还支持一个可选的第二个参数为当前项的索引。

数组项为对象的循环

使用索引

同时我们也可以用 of 替代 in 作为分割符

语法

示例:

也可以用 v-for 指令来循环对象。

第一个参数是训练遍历对象的属性值:

第二个的参数为对象的属性(键名)：

还可以通过第三个参数来获取索引值：

使用 v-for 更新已渲染的元素列表时,默认用 就地复用 策略列表数据修改的时候,他会根据key值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素我们在使用的使用经常会使用 index (即数组的下标)来作为 key ,但其实这是不推荐的一种使用方法

key值的使用其实是和vue响应式已经虚拟DOM有关, 那么我们通过下面的例子来了解一下

例子:

数据

页面渲染

但是数据发生了变化,

如果数据是这一种变化的话, 那么index没什么问题

数据前后变化的结果

这样vue就会分析到 其他的数据 都不需要改变,只需要在新增一个DOM节点,然后添加新增的数据就可以了

可以输入我们是在数组中间插入的数据就会不一样为了

这时数据的对比

通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染

是不是很惊奇,我明明只是插入了一条数据,怎么三条数据都要重新渲染?而我想要的只是新增的那一条数据新渲染出来就行了

最好的办法是使用数组中不会变化的那一项作为 key 值,对应到项目中,即每条数据都有一个唯一的 id ,来标识这条数据的唯一性使用 id 作为 key 值,我们再来对比一下向中间插入一条数据,此时会怎么去渲染

此时数据的变化

现在对比发现只有一条数据变化了,就是 id 为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的

为什么需要key属性: 虚拟DOM的diff算法,

当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

建议尽可能在使用 v-for 时提供 key ，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

v-if和v-for一起使用，v-for的优先级要高于v-if

可能会想到v-if和v-for是用的两种情况

那么接下来好好看看这两种情况

第一种情况: 为了过滤一个列表中的项目

为了过滤项目内容,我们可能会如下调用:

在这种情况下，请将 users 替换为一个计算属性（比如 activeUsers ），让其返回过滤后的列表。

示例详解:

如果现在只想显示价格在22元以上的水果,我们可能会这么写

这么写固然会得到你想要的效果, 但是因为v-for和v-if优先级的关系, 所以将会经过如下的运算

因此，哪怕我们只渲染出一小部分内容，也得在每次重新渲染的时候遍历整个列表，无论价格是否满足我们的条件

随意我们推荐使用计算属性, 在计算属性中处理过滤事宜, 计算属性会在计算完毕后缓存内容,提高遍历的效率

这样我们得到的结果是一样的,但是我们获得了如下的好处

第二种情况: 为了避免渲染本应该被隐藏的列表

也就是根据条件类判断列表的显示我们也后可能会使用下面的方法调用

实例详解:

原理是一样的, 就是如果这么写, 还是会循环遍历每一个数据,然后判断是不是显示. 一样浪费

所以我们将 v-if 移动到容器元素，这样我们就不用对每一个元素都进行判断是否显示, 取而代之的是，我们只检查判断一次，且不会在 isShow 为假的时候还循环运算 v-for。

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以使用计算属性和方法来过滤数据

我们上面讲过了计算属性,下面来看看方法的使用

总结示例:

---