element form rules 验证数组对象属性时如何写判断规则

禾苗种树2024-09-13 21:20

需求：一个el-form-item里放了2个下拉选择框，规定是最少选择一个，最多这俩都选择值；下拉框的值设置为对象了，所以这俩select的值组成了一个数组里的两个对象
逻辑：感觉只需要把第一个下拉框值（即数组【0】）设置为必选属性，对起属性值进行判断，为空则报错
知识点：elemenr的rules判断规则，如果是对对象的某个属性进行判断，需要双引号加改对象属性键名且el-form-item 上的prop 属性设置为需校验的字段名即可。
另外：如果需要select的值为对象，需要在select 上加上value-key="对象里属性的唯一值一般写userId"和el-option的:key="item.userId这俩值所用的属性名要一致

代码

js 复制代码

	// html
	<el-form-item label="参与人"  prop="auditors[0].userId">
	                        <el-select v-model="form.data.auditors[0]" value-key="userId">
	                            <el-option v-for="item in classname" :key="item.userId" :label="item.userName" :value="item"></el-option> 
	                        </el-select>
	                        <el-select  v-model="form.data.auditors[1]" value-key="userId" >
	                            <el-option v-for="item in classname" :key="item.userId" :label="item.userName" :value="item"></el-option>                         
	                        </el-select>
	                    </el-form-item>

js 复制代码

//js
data(){
	return {
	classname：[
		{
		    "userId": 1,
		    "userName": "张三"
		},
		{
		    "userId": 2,
		    "userName": "lisi"
		},
	],
	form:{
                
                data:{
                    auditors:[
                        {userId:null,userName:null},
                        {userId:null,userName:null},
                    ]
                },
                rules:{
                    "auditors[0].userId":{ required: true, message: '参与人', trigger: 'change' },

                }
            },
	}
}