又接到新需求了吧~ ~
在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加,移除表单,更加个性化的效果。
常见于填写个人信息,附加内容的表单
例如:
"工作经历”可以用户自己点击继续添加按钮,在原有的表单后面添加多一个表单,不需要就点击右上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元素动态渲染,移除表单并添加验证的实现