标签:vue Itemtype 自定义 验证 Param element ui 数组 id
在 vue + element-ui/plus 的项目中,有的时候会出现表单自定义增加数组字段,并要对新增加的字段添加相关验证。
举个例子
// 结构
data(){
return{
form:{
name:'',
Param:[
{id:0,label:'',Itemtype:0,},
{id:1,label:'',Itemtype:0}
] // 而Param数组里面是一个可以自定义增加/修改的对象
}
}
}
对于常用的表单字段,一般在 el-from 组件 添加 rules 规则,只要 prop 的键名对的上,就能正常进行规则验证。
但是对于这种自定义的嵌套数组,验证就比较麻烦了。
解决方法:
1.定义两个验证规则,一个是外部字段验证,另一个是数组自定义字段验证的。
data(){
return{
form:{
name:'',
Param:[
{id:0,label:'',Itemtype:0,},
{id:1,label:'',Itemtype:0}
] // 而Param数组里面是一个可以自定义增加/修改的对象
},
EditFormRules:{ // 外部
name:[{required:true,message:'必填项',trigger:'blur'}]
},
ParamFormRules:{ // 单个添加项
Itemtype:[{required:true,message:'必填项',trigger:'blur'}]
}
}
}
2.修改el-form 结构
<div v-for="(item,index) in form.Param" :key="index" style="padding-top:5px">
<el-form-item label="参数" :prop="`Param[${index}].Itemtype`" :rules="ParamFormRules.Itemtype">
<el-input v-model="item.Itemtype" type="text" />
</el-form-item>
// 或
<el-form-item label="参数" :prop="`Param[${index}].Itemtype`" :rules="ParamFormRules.Itemtype">
<el-input v-model="form.Param[index].Itemtype" type="text" />
</el-form-item>
</div>
标签:vue,
Itemtype,
自定义,
验证,
Param,
element,
ui,
数组,
id
From: https://www.cnblogs.com/Hymy/p/17630514.html