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>

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

import DynamicForm from './kafkaForm.vue'
const PARTONE = 'partOne'
 export default {
  components: { DynamicForm },
  data() {
    return {
      arr: [
        // 模拟从接口获取到的数据（如编辑场景）
        { partOneName: [], partOneAge: [], partOnetopic: '' }
      ],
      PARTONE,    
      Kafkaform: this.$form.createForm(this),
    }
  },

模板区：

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

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

            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)

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