vue +antd 动态表单

先说下效果：

 代码：

<template>
  
  <div>
    <a-card title="form-data" :bordered="true" style=" 40%">

      <div>
        <a-form ref="form" layout="inline" :model="form" >
          <div v-for="(item, index) in form.dynamicItem" :key="index">
                <a-form-item
                label="key"
                :prop="'dynamicItem.' + index + '.key'"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                <a-input v-model="item.key"></a-input>
              </a-form-item>
        
                <a-form-item
                label="value"
                :prop="'dynamicItem.' + index + '.value'"
                :label-col="formItemLayout.labelCol"
                :wrapper-col="formItemLayout.wrapperCol"
              >
                <a-input v-model="item.value"></a-input>
              </a-form-item>
              <a-form-item>
                <a-icon v-if="index !== 0" @click="deleteItem(item, index)"  class="dynamic-delete-button"
                  type="minus-circle-o"></a-icon>
              </a-form-item>
          </div>
        </a-form>
  
        <div style="display: flex; justify-content: center;">
          <a-button type="dashed"  @click="addItem" >
            <a-icon type="plus" /> Add field
          </a-button>
        </div>
      </div>

    </a-card>
  </div>

</template>


<script>
    const columns = [
    {
      title: 'Key',
      dataIndex: 'Key',
       '10%',
      scopedSlots: { customRender: 'Key' },
    },
    {
      title: 'Value',
      dataIndex: 'value',
       '10%',
      scopedSlots: { customRender: 'value' },
    },
    {
      title: 'desc',
      dataIndex: 'desc',
       '20%',
      scopedSlots: { customRender: 'desc' },
    },
    {
      title: 'operation',
      "4%",
      dataIndex: 'operation',
      scopedSlots: { customRender: 'operation' },
    },
  ];
  

  export default{


      computed: {
        
          formItemLayout() {
            const { formLayout } = this;
            return{
              
                  labelCol: { span: 5},
                  wrapperCol: { span: 19 }
                } 
          }
             },
    data () {
      return {
        form: {
          // index:0,
        dynamicItem: [
          {
            key: "",
            value: ""
          }
        ]
      },

      }
    },
    //methods 

    methods: {
      
      addItem() {
      this.form.dynamicItem.push({
        key: "",
        value: ""
      });
    },
    sure(form) {
      console.log(this.form.dynamicItem.length, "length");
      this.$refs[form].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteItem(item, index) {
      this.form.dynamicItem.splice(index, 1);
      console.log(this.form.dynamicItem, "删除");
    },

    }

  }
  
</script>