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

  <!-- 需求 
  1 根据点击添加 生成表格数据 
  2 动态添加 表单
  -->
1
2
3
4

在这里插入图片描述
点击添加生成对应动态表单

HTML

<template>
    <div>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
                  <a-form-model-item prop="contractNo" label="编号" style="display:flex;">
                      <a-input  v-model="form.contractNo"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <!-- 动态 -->
                  <div v-for="(item,index) in form.addArr" :key="index" style="border: 1px solid;">
                    <a-form-model-item :prop="'addArr.'+index+'.phone'" :label="`手机号${index+1}`"  :rules="{required: true, message:`请输入手机号`,trigger:'blur'}" style="display:flex;">
                      <a-input v-model="form.addArr[index].phone"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  
                  <a-form-model-item  :prop="'addArr.'+index+'.status'" label="状态" style="display:flex;" :rules="{required: true, message:'请选择状态',trigger:'blur'}">
                      <a-select v-model="form.addArr[index].status" placeholder="请选择">
                          <a-select-option value="0"> 未开始 </a-select-option>
                          <a-select-option value="1"> 执行中 </a-select-option>
                          <a-select-option value="2"> 已完成 </a-select-option>
                      </a-select>
                  </a-form-model-item>
                  
                  <a-form-model-item :prop="'addArr.'+index+'.name'" label="姓名" style="display:flex;" :rules="{required: true, message:'请输入名称',trigger:'blur'}">
                      <a-input v-model="form.addArr[index].name"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <a-button type="dashed" v-if="index !== 0"  style="width: 5%;cursor: pointer;margin: 0 0 0 70%;color: rgb(97, 97, 229);" @click="delectContent(index)">删除</a-button>
                  </div>
                  <a-button type="dashed" style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(97, 97, 229);" @click="addContent">
                          <a-icon type="plus" />添加
                      </a-button>
      </a-form-model>
      <a-button style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(208, 57, 19);" @click="btnSubmit">提交</a-button>
    </div>
  </template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

JS

<script>
  export default {
  data(){
      return{
      form:{
        contractNo:'',
        addArr:[//默认显示一条 
          {phone:'',status:'',name:''}
        ]
      },
      rules:{//固定input
        contractNo:[{ required: true, message: "请输入编号!", trigger: "blur" }]
      }
      }
  },
 // vue实现动态添加输入框(antdv组件)
  methods:{
    addContent(){//添加
      if(this.form.addArr.length<6){
        this.form.addArr.push(
        {phone:'',status:'',name:''}
      )
      }else{
        alert('添加条数限制')
      }
     
    },
    delectContent(index){//删除
    this.form.addArr.splice(index, 1)
    },
    // 提交
    btnSubmit(){
      this.$refs.ruleForm.validate(rules => {
        if(rules){
           alert('1111111111')
        }
      })
    },
  },
  }
  </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

 案例 
不可以单独删除表单的某一项 直接删除一行 
有ID 通过ID删除么有item 删除 找到对应的唯一值
1
2
3

案例

<template>
    <div>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
                  <a-form-model-item prop="contractNo" label="编号" style="display:flex;">
                      <a-input  v-model="form.contractNo"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <!-- 动态 -->
                  <div v-for="(item,index) in form.addArr" :key="index" style="border: 1px solid;">
                    <a-form-model-item :prop="'addArr.'+index+'.phone'" :label="`手机号${index+1}`"  :rules="{required: true, message:`请输入手机号`,trigger:'blur'}" style="display:flex;">
                      <a-input v-model="form.addArr[index].phone"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  
                  <a-form-model-item  :prop="'addArr.'+index+'.status'" label="状态" style="display:flex;" :rules="{required: true, message:'请选择状态',trigger:'blur'}">
                      <a-select v-model="form.addArr[index].status" placeholder="请选择">
                          <a-select-option value="0"> 未开始 </a-select-option>
                          <a-select-option value="1"> 执行中 </a-select-option>
                          <a-select-option value="2"> 已完成 </a-select-option>
                      </a-select>
                  </a-form-model-item>
                  
                  <a-form-model-item :prop="'addArr.'+index+'.name'" label="姓名" style="display:flex;" :rules="{required: true, message:'请输入名称',trigger:'blur'}">
                      <a-input v-model="form.addArr[index].name"  :max-length="15" placeholder="请输入" />
                  </a-form-model-item>
                  <a-button type="dashed" v-if="index !== 0"  style="width: 5%;cursor: pointer;margin: 0 0 0 70%;color: rgb(97, 97, 229);" @click="delectContent(index)">删除</a-button>
                  </div>
                  <a-button type="dashed" style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(97, 97, 229);" @click="addContent">
                          <a-icon type="plus" />添加
                      </a-button>
      </a-form-model>
      <a-button style="width: 5%;cursor: pointer;margin: 2% 0 0 70%;color: rgb(208, 57, 19);" @click="btnSubmit">提交</a-button>
    </div>
  </template>
  <script>
  export default {
  data(){
      return{
      form:{
        contractNo:'',
        addArr:[//默认显示一条 
          {phone:'',status:'',name:''}
        ]
      },
      rules:{//固定input
        contractNo:[{ required: true, message: "请输入编号!", trigger: "blur" }]
      }
      }
  },
 // vue实现动态添加输入框(antdv组件)
  methods:{
    addContent(){//添加
      if(this.form.addArr.length<6){
        this.form.addArr.push(
        {phone:'',status:'',name:''}
      )
      }else{
        alert('添加条数限制')
      }
     
    },
    delectContent(index){//删除
    this.form.addArr.splice(index, 1)
    },
    // 提交
    btnSubmit(){
      this.$refs.ruleForm.validate(rules => {
        if(rules){
           alert('1111111111')
        }
      })
    },
  },
  }
  </script>
  
  <style>
  
  </style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78