业务背景
要对form表单的某一项进行动态添加、删除反填操作,见图,要操作的项为BPID,其余项都是固定的。
实现思路(关键点)
- 首先要对BPID的每一项进行注册,使用v-decorator/getFieldDecorator
- getFieldDecorator(id, options) 和 v-decorator="[id, options]" 参数,两个重要参数:
2.1 options.preserve,表示:即便字段不再使用,也保留该字段的值
2.2 required,是否必填
具体步骤
-
html部分
<a-row :gutter="24" v-for="(k, index) in testArr" :key="index"> <a-col :md="12" :sm="24"> <a-form-item :label="index === 0 ? 'BPID' : ''" :required="true" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 ,offset: index>0?10:0 }"> <a-input v-decorator="[ testArr[index], { validateTrigger: ['change', 'blur'], rules: [ { required: true, whitespace: true, message: testArr.length === 1?'Please input BPID':'Please input BPID or delete this field.', }, ], }, ]" placeholder /> </a-form-item> </a-col> <a-col :md="6" :sm="24"> <a-icon v-if="testArr.length > 1&&modalTitle!='VIEW'" class="dynamic-delete-button" type="minus-circle-o" @click="() => remove(index)" /> </a-col> </a-row>
-
js 部分
首先在data中定义 testArr: [’'wj0], //默认有一项add() { const item = this.testArr[this.testArr.length - 1] //取数组的最后一项,默认是‘wj0’ const maxNum = parseInt(item.replace('wj', '')) + 1 //去掉wj然后+1,这样保证新增的项始终不会和其他项重复,且有规律 this.form.getFieldDecorator('wj' + maxNum, { initialValue: '', preserve: true //即便字段不再使用,也保留该字段的值,不设置这个属性,会导致删除错位的现象 }); this.testArr = this.testArr.concat('wj' + maxNum) //将新增项拼接到数组中 }
remove(k) { const deleteObj = this.testArr.splice(k, 1); const deleteItem = deleteObj[0] this.form.setFieldsValue({ //给删除的那一项赋值为空 [deleteItem]: '' }); this.form.getFieldDecorator([deleteItem],{ //给删除的那一项设置为不必填,否则保存的时候过不去 required: false }); },
//保存 handleSubmit() { this.form.validateFields((err, values) => { if (err) return this.confirmLoading = true; let str = ''; if (this.testArr.length > 1) { this.testArr.forEach((item, i) => { //循环testArr,将里面的值字符串拼起来 if (i < this.testArr.length - 1) { str = str + this.form.getFieldValue(item) + ',' } else { str = str + this.form.getFieldValue(item) } }) } else { str = this.form.getFieldValue(this.testArr[0]) } let params = {} for (let key in values) { if (key.indexOf('wj') == -1) { params[key] = values[key] //取其他项,如:name,source,desc } } params.bpid = str //处理完毕走接口 }) },
//打开模态框,给BPID赋值部分 //add时 this.form.getFieldDecorator('wj0', { initialValue: '', preserve: true }); //edit const bpidArr = data.bpid.split(','); //值; this.testArr = []; bpidArr.forEach((item, index) => { this.testArr.push('wj' + index) this.form.getFieldDecorator('wj' + index, { initialValue: item, preserve: true }); })
-
css 部分看Ant Design of Vue form组建中的动态表单,我做了一点调整,这里就不贴出来了