vue + element-ui 的from表单嵌套数组的验证问题-526互联

vue + element-ui 的from表单嵌套数组的验证问题

发布时间 2023-08-15 09:53:25作者: 小哈雷星

在 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'}]
        }
    }
}