vue元素动态渲染,移除表单并添加验证的实现

  

又接到新需求了吧~ ~

  


  

  

在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加,移除表单,更加个性化的效果。

  

常见于填写个人信息,附加内容的表单

  

例如:   

"工作经历”可以用户自己点击继续添加按钮,在原有的表单后面添加多一个表单,不需要就点击右上X方按钮移除

  


  

  

在实现之前,提出几个问题

  
      <李> vue怎么动态渲染或移除表单上去李   <李> v模型怎么绑定动态添加表单的价值值   <李>动态新增的表单如何验证   <李>动态表单怎么填写对应的道具李   <李>…   
  

好吧,我当时也思考了一会,最后选择数组方式,动态渲染

  


  

  

利用数组,v代表循环方式,可以完美实现动态渲染和移除,因为操作的只有对象数组而已

        出口默认{   名称:“vouchersDetail”,   数据(){   返回{   形式:{   regionName:”,   regionCode:”,//动态添加的对象数组   azList:(   {   azName:”,   logicCode:”,   physicCode:“   }   ]   }   }   },   计算:{//至少保留一个动态表单的开关   isShowCloseBtn () {   返回this.form [' azList ']。长度比;1   }   },   方法:{   addItem () {//点击添加表单的按钮,只需要将表单绑定的价值作为对象推到对象数组   this.form [' azList '] .push ({   azName:”,   logicCode:”,   physicCode:”,   重量:“   })   },   deleteItem(指数){//点击移除表单的按钮,根据点击的当前指数移除对象数组的元素   this.form [' azList ']。拼接(指数(1)   },   返回(){   window.history.back (1)   }   }   }   之前      

请格外注意动态添加表单的规则和道具

  

每个动态添加的表单都要加上规则

  

道具需要根据对象数组下标绑定设置对应的价值(:道具=啊產zList +指数+ .azName”)

  

那么对应的html形式为

        & lt; div类=v=岸厦嫘巫?项目、索引)的形式。azList”:关键="指数"比;   & lt;跨度v=" isShowCloseBtn " class="关闭" @click=癲eleteItem(指数)比;   & lt;我类=" el-icon-close "祝辞& lt;/i>   & lt;/span>   & lt; el-form-item标签="可用区名称:“   :规则="[{要求:真的,信息:“可用区名称不能为空'})”   :支持=癮zList(' +指数+ '].azName’”   祝辞label-width=" 150 px”;   & lt; el-input占位符=扒胧淙肟捎们啤皏模型="项目。azName”:最大长度=" 30 "祝辞& lt;/el-input>   & lt;/el-form-item>   & lt; el-form-item标签="逻辑可用区编码:“   :规则="[{要求:真的,信息:“逻辑可用区编码不能为空'})”   label-width=" 150 px "   :支持=癮zList(' +指数+ '].logicCode”“比;   & lt; el-input占位符=扒胧淙胛ㄒ籌D”v模型="项目。logicCode”:最大长度=" 30 "祝辞& lt;/el-input>   & lt;/el-form-item>   & lt; el-form-item label="物理可用区编码:“   :规则="[{要求:真的,信息:“物理可用区编码不能为空'})”   label-width=" 150 px "   :支持=癮zList(' +指数+ '].physicCode”“比;   & lt; el-input占位符=扒胧淙胛ㄒ籌D”v模型="项目。physicCode”:最大长度=" 30 "祝辞& lt;/el-input>   & lt;/el-form-item>   & lt;/div>   之前      


  

  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

vue元素动态渲染,移除表单并添加验证的实现