zoukankan      html  css  js  c++  java
  • 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'},
    	        ]
    		}
          }
        },
  • 相关阅读:
    Asp.Net MVC4 系列--进阶篇之路由 (2)
    Asp.Net MVC4 系列-- 进阶篇之路由(1)
    ASP.NET MVC AJAX的调用示例
    MVC中Controller控制器相关技术
    MVC中View界面数据呈现示例
    IEnumerable,ICollection,IList,List之间的区别
    Dapper数据库相关操作
    集合类---Map
    工厂模式
    适配器模式与外观模式
  • 原文地址:https://www.cnblogs.com/youxiu326/p/10540759.html
Copyright © 2011-2022 走看看