vue+a-form 动态表格,动态增加动态删除

思路借鉴了一位大佬的文章，原文地址如下:
版权声明：本文为qq_42203909原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：antd实现动态增减表单项，支持赋初始值！
首先是封装子组件，自己起个名字。
v-decorator官网上是这么说的：经过 v-decorator 包装的控件，表单控件会自动添加 value ，数据同步将被 Form 接管，我自己的理解v-decorator相当于v-model绑的值，只是操作值的方法不一样，v-model可以直接赋值，v-decorator需要用到 this.form.setFieldsValue({}) 方法修改值
1、 通过 v-decorator绑值， ${title}Name[${item}]，在父组件的子组件标签上会定义title为partOne。相当于给每一项都增加了一个相同的前缀，比如：partOneName[0]
2、initialValue是form表单的默认值
3、a-form可以直接在模板区写校验规则，如果要自定义，可以写 rules: [{ validator: validatorUrl }]，在methods中定义validatorUrl 校验方法即可
4、

<template>
  <div>
    <div class="dynamic-wrap" :style="{ maxHeight: wrapHeight + 'px' }">
      <div v-for="item in keysList" :key="item">
        <a-row :gutter="24">
          <a-col :span="12" >
            <a-form-item label="xx地址:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" >
              <a-input
                autocomplete="off"
                placeholder="请填写xx地址"
                v-decorator="[
                  `${title}Name[${item}]`,
                  {
                    initialValue: arr[item] ? arr[item].name : undefined,
                    rules: [{ validator: validatorUrl }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>

          <a-col :span="9">
            <a-form-item label="xx:" :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }">
              <a-input
                autocomplete="off"
                placeholder="请填写xx"
                v-decorator="[
                  `${title}Age[${item}]`,
                  {
                    initialValue: arr[item] ? arr[item].age : undefined,
                    rules: [{ validator: validatorPort }]
                  }
                ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="2" style="padding-left: 0px">
            <a-form-item :labelCol="{ span: 0 }" :wrapperCol="{ span: 24 }">
              <template v-if="item === id">
                <a-button type="dashed" icon="plus" @click="addRow(item)" class="addRowBtn"></a-button>
              </template>
              <template v-else>
                <a-button type="dashed" icon="minus" @click="removeRow(item)" class="minusRowBtn"></a-button>
              </template>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      <a-row>
        <a-col :span="23">
          <a-form-item label="xx" :labelCol="{ span: 3 }" :wrapperCol="{ span: 19 }">
            <a-input
              autocomplete="off"
              placeholder="请输入xx名称，如： Topic"
              v-decorator="[
               `${title}topic`,
                {
                  initialValue: arr['partOnetopic'],
                  rules: [{ validator: validatorTopic }],
                  validateTrigger: []
                }
              ]"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DynamicForm',
  props: {
    title: {
      type: String,
      default: ''
    },
    wrapHeight: {
      // 表单容器的高度
      type: Number,
      default: 120
    },
    arr: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      id: 0,
      keysList: []
    }
  },
  created() {
    this.form = this.$form.createForm(this)//创建form表单
    this.init()
  },
  methods: {
    // 初始化
    init() {
      const arr = [0]
      if (this.arr[0].partOneName.length !== 0) {
        // console.log('this.arr[0].partOneName.length', this.arr[0].partOneName.length);
        for (let i = 1; i < this.arr[0].partOneName.length; i++) {
          arr.push(i)
          this.id = this.id + 1//通过id自加的方式增加form表单
        }
      }
      this.keysList = arr
    },
    // 移除某行
    removeRow(k) {
      if (this.keysList.length === 1) {
        // 如果存在可以移除所有行的情况，把条件改为this.keysList.length === 0即可
        return
      }
      this.keysList = this.keysList.filter(item => item !== k)
    },
    // 新增一行
    addRow() {
      if (this.keysList.length < 6) {//需求需要限制为只能增加6行，如果无线增加，可以去掉条件
        this.id = this.id + 1
        this.keysList = this.keysList.concat(this.id)
      } else {
        this.$message.error('新增不可以超过6行！')
      }
    },

    // 验证xx正则
    validatorPort(rule, value, callback) {
      if (value) {
        if (!/^\d{2,5}$/.test(value)) {
          callback(new Error('请输入正确的xx'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
   
}
</script>

<style lang="less" scoped>
.dynamic-wrap {
  padding-top: 10px;
  background-color: white;
  overflow-y: scroll;
  overflow-x: hidden;
  &::-webkit-scrollbar {
    width: 7px;
  }
  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
    border-radius: 10px;
  }
  &::-webkit-scrollbar-track-piece {
    background: transparent;
  }

}
.minusRowBtn {
  color: #f5222d;
  background: #fff1f0;
  border-color: #ffa39e;
  padding-right: 7px;
  padding-left: 7px;
  height: 29px;
  margin-left: 10px;
}
.addRowBtn {
  // width: 70%;
  color: #1890ff;
  border-color: #91d5ff;
 background: #d2e4ee;
    padding-right: 7px;
  padding-left: 7px;
  height: 29px;
  margin-left: 10px;
  // margin: 0px 0px 20px 70px;
}
/deep/ .ant-form-item-label{
 &::before{
    display: inline-block;
    margin-right: 4px;
    color: #f5222d;
    font-size: 14px;
    font-family: SimSun, sans-serif;
    line-height: 1;
    content: '*';
  }
}
</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
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

然后在父组件中引入并使用

import DynamicForm from './kafkaForm.vue'
const PARTONE = 'partOne'
 export default {
  components: { DynamicForm },
  data() {
    return {
      arr: [
        // 模拟从接口获取到的数据（如编辑场景）
        { partOneName: [], partOneAge: [], partOnetopic: '' }
      ],
      PARTONE,    
      Kafkaform: this.$form.createForm(this),
    }
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

模板区：

  <a-form :form="Kafkaform" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" >
      <dynamic-form :title="`${PARTONE}`" :wrapHeight="360" :arr="arr" />
    </a-form>
1
2
3

方法中：
方法里的代码不太好贴，这个要根据你实际情况来获取值，以下代码仅供参考

            this.arr[0].partOneName = this.firstAddress
            this.arr[0].partOneAge = this.lastAddress
            setTimeout(() => {
              this.Kafkaform.setFieldsValue({ partOnetopic: Lastkafkaurl })
              this.Kafkaform.setFieldsValue({ partOneAge: this.arr[0].partOneAge })
              this.Kafkaform.setFieldsValue({ partOneName: this.arr[0].partOneName })
            }, 0)
1
2
3
4
5
6
7

基本上就是这样了，有问题可以私信我，看到会及时回复你