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

element-ui 无法对绑定表单的对象中的对象属性进行验证的更多相关文章

  1. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  2. spring boot:使用validator做接口的参数、表单、类中多字段的参数验证(spring boot 2.3.1)

    一,为什么要做参数验证? 永远不要相信我们在后端接收到的数据, 1,防止别人通过接口乱刷服务:有些不怀好意的人或机构会乱刷我们的服务,例如:短信接口, 相信大家可能很多人在工作中遇到过这种情况 2,防 ...

  3. DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

    绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...

  4. amaze UI 如何添加原生表单验证

    这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...

  5. vue指令:v-model绑定表单控件;v-model与v-bind结合使用

    一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...

  6. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  7. SpringMVC表单或Json中日期字符串与JavaBean的Date类型的转换

    SpringMVC表单或Json中日期字符串与JavaBean的Date类型的转换 场景一:表单中的日期字符串和JavaBean的Date类型的转换 在使用SpringMVC的时候,经常会遇到表单中的 ...

  8. 一、表单和ajax中的post请求&&后台获取数据方法

    一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...

  9. php开发面试题---2、php常用面试题二(表单提交方式中的get和post有什么区别)

    php开发面试题---2.php常用面试题二(表单提交方式中的get和post有什么区别) 一.总结 一句话总结: 数据位置:get参数在url里面,post在主体里面 数据大小:get几kb,pos ...

  10. Spring绑定表单数据

    Spring提供了一些jsp页面常用的form标签,很大程度上提高了我们开发的速度,不用再一个个的标签去绑定属性,而且后台接收数据也很简单,可以直接接收object对象作为属性.官方form标签介绍的 ...

随机推荐

  1. Linux|常用命令|sed

    目录 SED的适用场景 Option Action作用的行范围 Action类型:行的增删改查 增 删 改 查 正则Regular Expression SED的适用场景 SED是Stream EDi ...

  2. Python:HTTP请求头headers信息的查询

    GET和POST请求后会返回一个response对象,可通过key.values等访问字典中元素的方式来访问该response对象headers中的各种属性 r=requests.get(url,he ...

  3. UML类图的补充及软件设计原则

    UML类图的补充及软件设计原则 UML 从目标系统的不同角度出发,定义了用例图.类图.对象图.状态图.活动图.时序图.协作图.构件图.部署图等 9 种图. 1.uml补充 统一建模语言(Unified ...

  4. 矩池云 | 利用LSTM框架实时预测比特币价格

    温馨提示:本案例只作为学习研究用途,不构成投资建议. 比特币的价格数据是基于时间序列的,因此比特币的价格预测大多采用LSTM模型来实现. 长期短期记忆(LSTM)是一种特别适用于时间序列数据(或具有时 ...

  5. 专业5 laravel框架添加,删除,恢复,分页,搜索接口

    //////////////////////资源路由 //商品资源路由恢复Route::get('/restore/{id}','goodController@restore');//商品资源路由添加 ...

  6. php jsonp接口

    //jsonp回调 $callback = isset($_GET['callback']) ? trim($_GET['callback']) : ''; //jsonp回调参数,必需 $cgc_k ...

  7. CF1534F1题解

    首先,对于一个在第 \(i\) 行 \(j\) 列的沙子,如果他开始下降,他能够使哪些沙子下降呢? 很容易得知是第 \(j-1,j,j+1\) 列所有行号不小于 \(i\) 的沙子. 对于沙子 \(u ...

  8. HCNP Routing&Switching之组播技术-组播分发

    前文我们了解了组播技术中的igmp-snooping相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15860484.html:今天我们来聊一聊组播技术 ...

  9. npm vue项目的创建

    一.创建项目之前需要先下载一个node.js 官方网址:https://nodejs.org/en/  二.创建 (1)建一个文件夹,进入这个文件夹输入cmd打开小黑窗: Vue.js文档:https ...

  10. .net Core 调用EF Core 爬坑

    .net Core 中调用 EF Core项目 首先得建一个类库供.net Core 的主项目引用:其次,在.net Core 中做注入:最后,在页面中调用 1.类库项目中的操作 1.新建类库项目 2 ...