data(){
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="选择分类" prop="sorts">
<el-cascader
:options="options"
change-on-select
filterable
v-model="ruleForm.sorts"
clearable></el-cascader>
</el-form-item>
</el-form>
/*表单验证*/
ruleForm: {
sorts: '',
},
/*验证规则*/
rules: {
sorts: [
{required: true, message: '请选择分类', trigger: 'change'}
],
},
}

element-ui设置级联选择器表单验证的更多相关文章

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

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

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

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

  3. 基于element ui的级联选择器组件实现的分类后台接口

    今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: ...

  4. element UI Cascader 级联选择器 编辑 修改 数组 路径 问题(转载)

    来源:https://segmentfault.com/a/1190000014827485 element UI的Cascader级联选择器编辑时 vue.js element-ui 2 eleme ...

  5. HTML5伪类选择器表单验证

    input : required   选择必填表单域 input : focus : invalid 选择当前聚焦的且含有非法输入值的表单域 input : focus : valid 选择当前聚焦的 ...

  6. Element UI:级联选择器Cascader_动态加载_多级请求不同接口(已知第一级调取第二级)

    ELEMENT UI_CASCADER 使用过饿了么级联动态加载的小伙伴应该都知道,lazyLoad本身是一个无差别返回渲染结点的函数. 当我们存在一个需求:已知级联选择器的第一级结点,现在需要通过第 ...

  7. 记录一下使用element ui使用级联选择器的坑,级联选择器的默认选中

    Cascader 级联选择器 使用级联选择器我使用的是默认选中值 下面是我的数据格式,只是形式相同,值不同, 后台的数据是这样的不是ID //级联选择器 <el-cascader :props= ...

  8. 有关vue中用element ui 中的from表单提交json格式总是有冒号的问题解决办法

    因为后台要求要传递JSON格式的数据给他,然后我转了之后总是多了冒号,后来又看了自己的报错,原来是报了404错误,说明路径找不到, 数据格式 后来发现怎么都不行了,然后突然查看了报错报的是404,说明 ...

  9. element Ui的级联选择器 任意一级选中下拉框自动关闭

    封装成一个子组件 <template> <el-cascader v-model="value" clearable placeholder="请选择& ...

随机推荐

  1. Linux远程连接mongodb

    当没有客户端工具,eg:robo3T时,如何修改mongodb里的数据呢? 1.连接mongodb服务器mongo 1.1.1.1:1688 2.查看数据库列表show dbs 3.选择使用log库u ...

  2. JavaWeb网上图书商城完整项目-数据库操作工具类

    1.首先安装数据库,在windows上安装和在unix上面安装环境不一样,我在自己的本地电脑上安装,安装成功之后,如果使用navicat远程工具访问,需要允许mysql远程能被访问 方法二.直接授权( ...

  3. SpringMVC 学习笔记(7)异常操作

    如何使用HandleException 在程序中,异常是最常见的,我们需要捕捉异常并处理它,才能保证程序不被终止. 最常见的异常处理方法就是用try catch来捕捉异常.这次我们使用springmv ...

  4. redis基础一

    2.修改redis.conf的配置文件有两个地方 a.将daemonize设置成true支持后台启动 b.将redis的数据库文件保存到 下面的目录 3.启动redis服务器 4.操作redis ,给 ...

  5. Spring-AOP:一、注解demo及基本概念

    切面:Aspect 切面=切入点+通知.在老的spring版本中通常用xml配置,现在通常是一个类带上@Aspect注解.切面负责将 横切逻辑(通知) 编织 到指定的连接点中. 目标对象:Target ...

  6. NET 数据结构-单链表

    概念介绍: 单链表是一种链式存取的数据结构,用一组地址任意的存储单元存放线性表中的数据元素. 链表中的数据是以结点来表示的,每个结点的构成:元素(数据元素的映象) + 指针(指示后继元素存储位置),元 ...

  7. python R语言 入门常见指令

    环境是windows R语言安装包 install.packages("magrittr")

  8. 开发中如何让本地host和代理共存?

    开发中若遇到了需要相同域名的情况,比如利用cookie共享的sso策略,可以设置本地host映射到开发服务.设置域名,生效,正常开发. 但在公司中可能是内网,请求都需要经过代理,这时候可能会发现设置h ...

  9. 错误记录——fail: Microsoft.AspNetCore.Server.Kestrel[13]

    fail: Microsoft.AspNetCore.Server.Kestrel[13] Connection id "0HLPN4417RVEM", Request id &q ...

  10. Write a program to copy its input to its output, replacing each string of one or more blanks by a single blank.

    #include <stdio.h> void main() { int c,c_BCN; while((c=getchar())!=EOF) { if(c!=' ') c_BCN=; i ...