在项目中经常遇到动态表单的业务。在编辑动态表单时需要回显新增后的内容。本文介绍Ant Design of Vue 的动态表单回显。
例如，如果添加两行动态表单，则在第二次编辑时需要回显。
下面是表单的HTML代码
a-row:gutter=’20’v-for=’k，index ) inform.getfieldvalue’keys ‘ ) 3360 key=’ k ‘ v-bind=’ in deys ‘ ‘ passengers ‘ : ‘ ‘ :要求=’ false ‘ a-col : span=’1’/a-cola-col : span=’ 11 ‘ a-form-itemv-bind=’ formitemlayout ‘ label=’参数名称’ a-inputv-decorator=’ [ initial value : account account.param，rules: [ { required: true，whitespace: true， 消息3360 ‘ ] ] ‘//a-form-item/a-cola-col : span=’ 11 ‘ a-form-itemv-bind=’ formitemlayout ‘ label=’参数描述’ a-inpabel ) ) ) ) ) 说明initial value : account account.param description，rules : [ { requirer } ] white space : true，message: ‘参数}、]//a-form-item/a-cola-col : span=’1′ a-iconv-if=’ form.getfield value ‘ keys ‘ ) ) ) ) . length1′ class=’ dynamic-delete-button ‘ type=’ MINUS-circle-o ‘ : disabled=’ form.getfield value a-ccle a-ROWA-row : gutter=’ 20 ‘ a-col : span=’ 24 ‘ a-form-itemv-bind=’ formitemlayoutwithoutlabel ‘ a-butttan 在a-form-item/a-col/a-row表单中编辑的回显逻辑将在setFieldsValue中回显
before create this.form=this.$ form.create form ) this )/this.form.getfielddecorator ) ‘ keys ‘， { initi a ator } watch : { async visible val ) if ) this.account this.form.getfield decorator )、{ initial value 3360 ton letparams={indexorder:’ASC ‘，indexorderkey:’id ‘，currentPage: 0，number perpage :10 } constres=awaid params ) ifRES.Success ) let data=RES.data.rowsletparam=[ ] letparamdescription=[ ] this.keys=[ ] data.feys index this.keys.push index ) param.push ) item.param ) paramdescription.push ) item.description ) this this.$nextTick ) this.form.setfieldsvalue ) ) param:param，param描述3360 param描述} } Elam
removek ) const form )=thisconstkeys=form.getfield value ‘ keys ‘ ) if ) keys.Length====1) return form=添加动态项add ) const form )=thisconstkeys=form.getfield value ‘ keys ‘ ) ) ) ) ) 652 leley 1 ) form.setfield svalue { keys 3360 next keys } )回显新数据，允许同时删除和添加行。 打开已编辑的模态框，对参数名称和参数说明进行回显。