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

Vue中动态增加表单项的方法,第1张

在我的项目中遇到了两种动态增加表单项的场景,一种是对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.改变标识,进行循环插入


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11815216.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存