element-ui 无法对绑定表单的对象中的对象属性进行验证

 

		<el-form-item label="类型" :label-width="formLabelWidth" prop="typeId">
			 <template>
				<el-select v-model="form.typeId" clearable
					placeholder="请选择"> 
					<el-option v-for="type2 in types" :key="type2.id"
					:label="type2.name" :value="type2.id">
					 </el-option> 
				</el-select> 
			</template>
		</el-form-item>
		<el-form-item label="设计师" :label-width="formLabelWidth" prop="designer.id"> 
			<template>
				<el-select v-model="form.designer.id" clearable
					placeholder="请选择"> 
					<el-option
					v-for="designer in designers" :key="designer.id"
					:label="designer.name" :value="designer.id"> 
					</el-option>
				 </el-select> 
			</template>
		</el-form-item>

如果是直接绑定属性，是可以的，但是绑定对象中的属性就需要特别处理，需要在rules中添加双引号 " "

 

data:function() {
      return {
        form: {id:"",name:"",code:"",config:"",designer:{id:""}},
        types:[],
        diyResourceImgs:[],
        designers:[],
        formLabelWidth:"100px",
        uploading:false,
        uploadings:false,
        //rules 加校验
        rules: {
        	name: [
	    		{ required: true, message: '请输入素材名称', trigger: 'blur' },
	        ],
	        code: [
	    		{ required: true, message: '请输入素材编号', trigger: 'blur' },
	        ],
	        price: [
	    		{ required: true, message: '请输入素材价格', trigger: 'blur' },
	        ],
	        typeId: [
	    		{ required: true, message: '请选择类型', trigger: 'blur' },
	        ],
	        "designer.id":[
	        	{required:true,message: '请选择类型',trigger:'blur'},
	        ]
		}
      }
    },