Vue 动态添加表格详细讲解！_vue3实现动态添加多个表单,表单对象中包含4个数组对象

作者：菜鸟追梦旅行 | 2024-02-16 06:16:14

踩

vue3实现动态添加多个表单,表单对象中包含4个数组对象

1、实现界面如下
2、框架Vue
3、ui框架 ant design for Vue 版本：1.7.2
4、最重要的是数据结构分析
在这里插入图片描述

4、数据结构

form: {
    modalEndpointId: '',
    shareParams: [  
      {
        modelMetrics: '',
        modalCheck: '',
        modalCheckValue: '',
        modalCheckId: '',
        modalWarning: '',
        modalAbnormal: '',
        modalWarningLevel: '',
      },
    ],
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

讲解： shareParams是需要动态添加的表格，我们点击添加的表格不知道是多少个，所以数据结构是数组，包含对象。

5、template 模板
5-1、外层使用一个大div 包裹
5-2、使用的ant design a-form-model 进行包裹 :model=“form” 这里的 form 就是 data 的参数
5-3、a-form-model-item 是 a-form-model 的模块,下面在声明的div 命名为class 的 tablesStyle 里面进行了v-for 循环
循环的是 data 数据中的 form 对象点中的shareParams
然后在把v-for的参数赋值给 input 输入框中内通过 v-model=“”的内容

6、 a-form-model-item 中的 prop是需要传参的校验参数，表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的，里面 :rules规则是进行校验是一个数组对象，可以填写要校验的和样式。
:label-col
:wrapper
这俩动态绑定的是在data 中设置的表格样式

巡更点位: {{ xgModelPoint }}

    <div class="tablesStyle" v-for="(item, index) in form.shareParams" :key="index">
      <a-form-model-item
        label="监控实体"
        style="margin-bottom: 0"
        :prop="`shareParams.${index}.modelMetrics`"
        :rules="[{ required: true, message: '请输入监控实体' }]"
      >
        <a-input placeholder="请输入监控实体" v-model="item.modelMetrics" />
      </a-form-model-item>

      <a-form-model-item
        label="检查项"
        style="margin-bottom: 0"
        :prop="`shareParams.${index}.modalCheck`"
        :rules="[{ required: true, message: '检查项不能为空' }]"
      >
        <a-select v-model="item.modalCheck" placeholder="检查项不能为空">
          <a-select-option value="value1"> 运行状态 </a-select-option>
          <a-select-option value="value2"> 有无状态 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item label="检查值" style="margin-bottom: 0">
        <a-form-model-item
          :prop="`shareParams.${index}.modalCheckValue`"
          :style="{
            display: 'inline-block',
            width: '100px',
            marginBottom: 0,
          }"
          :rules="[{ required: true, message: '检查值不能为空' }]"
        >
          <a-select v-model="item.modalCheckValue">
            <a-select-option value="value4"> 运行状态 </a-select-option>
            <a-select-option value="value5"> 有无状态 </a-select-option>
          </a-select>
        </a-form-model-item>

        <span> 或值</span>

        <a-form-model-item
          :prop="`shareParams.${index}.modalCheckId`"
          :style="{
            display: 'inline-block',
            width: '100px',
            marginBottom: 0,
          }"
          :rules="[{ required: true, message: '检查值不能为空' }]"
        >
          <a-select v-model="item.modalCheckId">
            <a-select-option value="value6"> 运行状态 </a-select-option>
            <a-select-option value="value7"> 有无状态 </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model-item>

      <a-form-model-item label="则需异常告警" style="margin-bottom: 0">
        <a-form-model-item
          :prop="`shareParams.${index}.modalWarning`"
          :style="{
            display: 'inline-block',
            width: '100px',
            marginBottom: 0,
          }"
          :rules="[{ required: true, message: '检查值不能为空' }]"
        >
          <a-input placeholder="请输入监控对象" v-model="item.modalWarning" />
        </a-form-model-item>

        <span> - - </span>

        <a-form-model-item
          :prop="`shareParams.${index}.modalAbnormal`"
          :style="{
            display: 'inline-block',
            width: '100px',
            marginBottom: 0,
          }"
          :rules="[{ required: true, message: '检查值不能为空' }]"
        >
          <a-input placeholder="请输入监控对象" v-model="item.modalAbnormal" />
        </a-form-model-item>
      </a-form-model-item>

      <a-form-model-item
        label="告警级别"
        style="margin-bottom: 0"
        :prop="`shareParams.${index}.modalWarningLevel`"
        :rules="[{ required: true, message: '告警级别不能为空' }]"
      >
        <a-select v-model="item.modalWarningLevel">
          <a-select-option value="value8"> 运行状态 </a-select-option>
          <a-select-option value="value9"> 有无状态 </a-select-option>
        </a-select>
      </a-form-model-item>

      <a-form-model-item>
        <a-button type="primary" @click="removeParam(index)"> 删除 </a-button>
      </a-form-model-item>
    </div>
  </a-form-model>

  <a-form-model-item>
    <a-button type="primary" @click="addShareTable"> 添加 </a-button>
  </a-form-model-item>
</div>
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

7、data 部分

 form: {
        modalEndpointId: '',
        shareParams: [
          {
            modelMetrics: '',
            modalCheck: '',
            modalCheckValue: '',
            modalCheckId: '',
            modalWarning: '',
            modalAbnormal: '',
            modalWarningLevel: '',
          },
        ],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

methods 方法部分

addShareTable() {
  this.index += 1
  this.form.shareParams.push({
    modelMetrics: '',
    modalCheck: '',
    modalCheckValue: '',
    modalCheckId: '',
    modalWarning: '',
    modalAbnormal: '',
    modalWarningLevel: '',
  })
},
removeParam(index) {
  console.log('删除添加', index)
  this.form.shareParams.splice(index, 1)
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/91406