antdVue-form的动态增减

需求：form 表单，动态增加下拉列表等信息

• 思路：借助keys 数组的下标，进行循环增减；

1. 创建form 表单，并绑定赋值一个keys

	beforeCreate() {
		this.form = this.$form.createForm(this);
		this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true });
	  },

2. 页面显示 利用数组keys进行循环，并绑定每个数组的下标=》v-decorator="[province[${index}],{}]"

	<div
		v-for="(k,index) in form.getFieldValue('keys')"
		:key="index"
	>
	<a-form-item
		label="办理范围"
		class="stepFormLabel"
		style="marginBottom:0"
	>
		<a-checkbox-group
			v-decorator="[`rangeType[${index}]`,]"
		>
			<a-checkbox  value="1">社保</a-checkbox>
			<a-checkbox  value="2" >公积金</a-checkbox>
		</a-checkbox-group>
	</a-form-item>
	
</div>

3. 有下拉列表的需要注意每个select 的下拉值都是单独的

	<a-form-item
		class="stepFormLabel"
		label="区域"
		>
		<a-select
			showSearch
			placeholder="选择省份"
			optionFilterProp="children"
			style="width: 100px"
			v-decorator="[`province[${index}]`,{}]"

			@change="(value)=>handleProvinceChange(value,index)"
			:dropdownMatchSelectWidth="false"
		>
			<a-select-option
				v-for="(item, areaindex) in areaTrees[index]"
				:key="areaindex"
				:value="String(item.id)"
			>{{ item.areaName }}
			</a-select-option>
		</a-select>
	</a-form-item>
	//areaTrees[index] 这样每一个新增才是互不影响的状态，如果需要进行下拉列表选择的互斥，那就借助空数组等完成；

4. 增加的时候 利用页面全局const index = 0，进行自增，同时记得下拉列表的数组也要自增

	let index = 0;
	export default {
	 	methods: {
			addItem(){
			  const { form } = this;
			  const keys = form.getFieldValue('keys');
			  const nextKeys = keys.concat(index++);
			  form.setFieldsValue({
				keys: nextKeys,
			  })
			  this.areaTrees = [...this.areaTrees,this.areaList]
			},
	 	}
	}

5. 删除的时候 同理，记得所有的项目都要清空删除,同时下拉列表也要删除对象的

	remove(index){
		  const { form } = this;
		  const allform = form.getFieldsValue()
		  const keys = allform.keys;
		  const provinceArr = allform.province;
		  const cityArr = allform.city;
		  const townArr = allform.town;
		  const rangeArr = allform.rangeType;
		  const settleFlagArr = allform.settleFlag;
		  if (keys.length === 1) {
			return;
		  }
		  this.areaTrees.splice(index,1)
		  this.areaCitys.splice(index,1)
		  this.areaTowns.splice(index,1)
		  form.setFieldsValue({
			keys: keys.filter((key,k) => index!== k),
			province: provinceArr.filter((key,k) =>index !== k),
			city: cityArr.filter((key,k) =>index !== k), 
			town:townArr.filter((key,k) =>index !== k),
			rangeType:rangeArr.filter((key,k) =>index !== k),
			settleFlag:settleFlagArr.filter((key,k) =>index !== k)
		  });
	},

6. 编辑修改的时候 ，保持当初提交获取的值的样式进行正常回显就行

	edit(data) {
      this.visible = true
      this.areaList = Vue.ls.get('glob_area');
      const areaConfs = data.areaConfs;
      const areaPermissionConf = data.areaPermissionConf;
      this.id = areaPermissionConf.id;
      this.resList.push({
        id:areaPermissionConf.userId,
        title:areaPermissionConf.nickName,
      })
        // 省列表
        this.areaTrees = []
        const keys = [0]
        const proArr = []
        const cityArr =[]
        const townArr = []
        const rangeArr = []
        const settleArr = []
        areaConfs.map((item,index)=>{
          if(index>0){
            keys.push(index)
          }
          proArr.push(item.province)
          cityArr.push(item.city)
          townArr.push(item.town)
          rangeArr.push(item.rangeType.split(','))
          settleArr.push(item.settleFlag.split(','))
          this.areaTrees.push(this.areaList)
        })
        this.form.setFieldsValue({keys:keys});
         // 市列表
        this.areaCitys = []
        this.areaTrees[0].reduce((acc,cur)=>{
          proArr.map((s,i)=>{
            if(s==cur.id){
              this.areaCitys[i]=cur.children
            }
          })
        },[])
        // 县区列表
        this.areaTowns = [];
        this.areaCitys.reduce((acc,cur)=>{
          for(let t of cur){
            cityArr.map((c,i)=>{
              if(c==t.id){
                this.areaTowns[i]=t.children
              }
            })
          }
        },[])
      const _this = this
      this.$nextTick(() => {
        _this.form.setFieldsValue(
          pick({province:proArr,city:cityArr,town:townArr,userId:areaPermissionConf.userId,
                userName:areaPermissionConf.userName,rangeType:rangeArr,settleFlag:settleArr},
                'province','city','town','userId','userName','rangeType','settleFlag')
        )
      })
    },

标签：antdVue,index,const,form,keys,item,增减,push
来源： https://www.cnblogs.com/fangli/p/15624305.html