vue 动态添加 多项目 表单_【Vue】vue动态添加表单项

一、需求背景

有一个接口需要批量修改入参，但是不固定多少个入参，不固定是哪一个。就得做一个动态添加表单项，如下面的格式params里面，一个key，一个value

参数形式如下面params，忽略pvaId。

{"pvaId":9,"params":[{"paramName":"1","paramValue":"1"},{"paramName":"2","paramValue":"2"},{"paramName":"3","paramValue":"3"},{"paramName":"4","paramValue":"4"}]}

二、实现效果

一组值是一个参数名，一个参数值，

可动态添加一组，可删除一组。

三、实现过程

3.1、html

固定打开弹窗，会显示一组参数名1，参数值1；

点击添加参数后，会在下面动态生成参数名2，参数值2.......；

点击一组参数后面的删除按钮，会动态删除该组参数，下面的下标自动向上替代删除的一个

1

2

3

4

7

8

9

12

13

14

15

16

17

18

19 =1":key="index">

20

23

24

25

26

29

30

31

32

33

34

35