antd动态增减表单

 1.官网示例（Ant Design Vue）

 官网已经写好了测试用例。但是这个只是增减表单并点击提交后获取提交的值。作为表单，少不了的是初始渲染。没有初始渲染，光有提交的表单是不完整的表单。下面这个才是我想实现的效果。

2.本地代码完善

 注意：antd版本别搞错了，这里用的是v1.xx版本的。最新的已经到3点几了。

 下面是完整代码，直接引入即用。

<template>
  <a-form :form="form" @submit="handleSubmit" v-if="show">
    <a-form-item
      v-for="(k, index) in form.getFieldValue('keys')"
      :key="k"
      v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
      :label="index === 0 ? 'URL' : ''"
      :required="false"
    >
      <a-input
        v-decorator="[
          `names[${k}]`,
          {
            validateTrigger: ['change', 'blur'],
            rules: [
              {
                required: true,
                whitespace: true,
                message: '请输入正确的URL信息',
              },
            ],
          },
        ]"
        placeholder="请输入URL信息"
        style="width: 60%; margin-right: 8px"
      />
      <a-icon
        v-if="form.getFieldValue('keys').length > 1"
        class="dynamic-delete-button"
        type="minus-circle-o"
        :disabled="form.getFieldValue('keys').length === 1"
        @click="() => remove(k)"
      />
    </a-form-item>
    <a-form-item v-bind="formItemLayoutWithOutLabel">
      <a-button type="dashed" style="width: 60%" @click="add">
        <a-icon type="plus" /> 添加
      </a-button>
    </a-form-item>
    <a-form-item v-bind="formItemLayoutWithOutLabel">
      <a-button type="primary" html-type="submit">
        提交
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
let id = 0;
export default {
  data() {
    return {
	  show:false,
	  project:'',    //项目名称
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 },
        },
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 },
        },
      },
    };
  },
  mounted() {
    this.form = this.$form.createForm(this);
	this.geturl();    //获取url地址进行渲染
  },
  methods: {
	geturl(){
		// 通过setTimeout模拟网络请求 url ：${host} /v1/spanFilter/queryByProject
		let data={
			"code":"200",
			"msg":"查询成功",
			"data":{
				"spanFilter":{
					"project":"cpaas",
					"spanNames":[
						"http://xianheaihca/aaaa",
						"https://*naca*",
						"https://woe/wochifan/henaicha"]
					}
			}
		}
		this.project=data.data.spanFilter.project;
		let keys=Array.from(Array(data.data.spanFilter.spanNames.length),(v,k)=>k);
		let names=data.data.spanFilter.spanNames;
		let obj={keys:keys,names:names};
		console.log(keys)
		
		setTimeout((res) => {
		  this.form.getFieldDecorator('keys', { initialValue: res.keys, preserve: true });
		  this.show = true;
		  this.$nextTick(() => {
		    this.form.setFieldsValue(res);
		  });
		}, 2000, obj);
	},
    remove(k) {
      const { form } = this;
      // can use data-binding to get
      const keys = form.getFieldValue('keys');
      // We need at least one passenger
      if (keys.length === 1) {
        return;
      }

      // can use data-binding to set
      form.setFieldsValue({
        keys: keys.filter(key => key !== k),
      });
    },

    add() {
      const { form } = this;
      // can use data-binding to get
      const keys = form.getFieldValue('keys');
	  var newid=keys[keys.length-1]+1;
      const nextKeys = keys.concat(newid);
      // can use data-binding to set
      // important! notify form to detect changes
	  console.log("添加",keys,nextKeys);
      form.setFieldsValue({
        keys: nextKeys,
      });
    },

    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          const { keys, names } = values;
          console.log('提交的值: ', values);
          console.log(
            '数组值:',
            keys.map(key => names[key]),
          );
		  console.log("项目名称",this.project);
        }
      });
    },
  },
};
</script>
<style>
.dynamic-delete-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>