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. 【Python】使用Selenium实现淘宝抢单

    最近,小明为了达成小姐姐的愿望,在某宝买到心仪的宝贝,再加上又迷上了python,就通过python轻而易举地实现了(个人声明:对Java来说,这并不是背叛). 需求分析&前期准备 需求其实很 ...

  2. elasticserach数据库深度分页查询的原理

    深度分页存在的问题 https://segmentfault.com/a/1190000019004316?utm_source=tag-newest 在实际应用中,分页是必不可少的,例如,前端页面展 ...

  3. 微信小程序-超出部分显示省略号(单行与多行)

    /*单行*/ .work_font{ display:block /*这里设置inline-block或者block:根据使用情况来定(行内元素需要加这个,块级元素和行内块级可以不用)*/ white ...

  4. [强化学习]Part1:强化学习初印象

    引入 智能 人工智能 强化学习初印象 强化学习的相关资料 经典书籍推荐:<Reinforcement Learning:An Introduction(强化学习导论)>(强化学习教父Ric ...

  5. The main method caused an error: java.util.concurrent.ExecutionException: org.apache.flink.runtime.client.JobSubmissionException: Failed to submit JobGraph.

    在使用flink run命令提交任务可能会遇到如下错误: The program finished with the following exception: org.apache.flink.cli ...

  6. WTL中GDI+支持资源文件加载

    WTL中GDI+支持资源文件加载 分类: WTL WTL gdi+ gdi+2013-04-22 17:16 78人阅读 评论(0) 收藏 举报 WTLGDI+c++ 今天遇到一个小问题困扰了.就是G ...

  7. tkinter的控件

    包含如下控件: Button  按钮控件 Canvas 画布控件,显示图形元素如线程或文本 Checkbutton 多选框控件,用于在程序中提供多项选择框 Entry 单行输入控件,用于显示简单的文本 ...

  8. [开源]eCharts配置简化包OptionCreator[typescript版]

    eCharts存在问题 配置eCharts的option,对于大部分的开发者来说,复杂情况下是一件繁琐的事情.为什么繁琐,大致有以下这些原因 大小写敏感:在没有IDE的智能提示下,很容易写错,而且即使 ...

  9. 5年前端经验小伙伴教你纯css3实现饼状图

    有一些网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多.这里笔者为大家演示一种纯css实现饼状图效果的方 ...

  10. 基于 React 开发了一个 Markdown 文档站点生成工具

    Create React Doc 是一个使用 React 的 markdown 文档站点生成工具.就像 create-react-app 一样,开发者可以使用 Create React Doc 来开发 ...