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

哈雷星 / 2023-08-15 / 原文

在 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>