山西省住房建设厅网站首页,商务网站设计素材,不重名的建筑公司名字,服务器网站建设教程视频vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
先看一下效果图#xff08;想在表单里动态的增删 form-item#xff0c;然后添加rules#xff0c;校验其必填项#xff1b;
#xff09;:
html部分
div v-for(item, index) in …vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
先看一下效果图想在表单里动态的增删 form-item然后添加rules校验其必填项
:
html部分
div v-for(item, index) in form.labels :keyindex classlabelel-form-item label名称::proplabels. index .name:rules{required: true, message: 请输入, trigger: blur}classmiddleInputel-input v-model.trimitem.name maxlength30 placeholder请输入/el-inputi classel-icon-circle-plus-outline icon v-if(index (form.labels.length - 1)) click.preventaddKey(item)/ii classel-icon-remove-outline icon v-if(form.labels.length 1) click.preventremoveKey(item, index)/i/el-form-itemel-form-item label值::proplabels. index .value:rules{required: true, message: 请输入, trigger: blur}classmiddleInputel-input maxlength100 show-word-limit typetextarea :rows3 v-model.trimitem.value placeholder请输入/el-input/el-form-item/divjs
//data:
form: {labels: [{name: ,value: }]
},// methods:
addKey (item) {this.form.labels.push({name: ,value: })
},
removeKey (item, index) {this.form.labels.splice(index, 1)
},注意
核心代码
:proplabels. index .name
:rules{required: true, message: 请输入, trigger: blur}prop里的值有格式要求以本demo为例“表单属性数组key名 ‘.’ 索引值 ‘.’ 数组里对象的key名”rules里填写校验不成功触发条件和提示语
