- 创建form 表单，并绑定赋值一个keys
beforeCreate() {
this.form = this.$form.createForm(this);
this.form.getFieldDecorator('keys', { initialValue: [0], preserve: true });
},
- 页面显示 利用数组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>
- 有下拉列表的需要注意每个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] 这样每一个新增才是互不影响的状态，如果需要进行下拉列表选择的互斥，那就借助空数组等完成；
- 增加的时候 利用页面全局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]
},
}
}
- 删除的时候 同理，记得所有的项目都要清空删除,同时下拉列表也要删除对象的
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)
});
},
- 编辑修改的时候 ，保持当初提交获取的值的样式进行正常回显就行
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')
)
})
},