从品牌网站建设到网络营销策划,从策略到执行的一站式服务
前言
本篇文章基于 vue、element-ui
需求
前端开发过程中,经常遇到表单开发的需求,element-ui 为我们带来了极大的便利,前端只需要更专注于前端逻辑。
我们往往会遇到相对复杂的表单,比如下面的表单:
我们设计的时候可以把它设计成 3 级表单,即划分表单到每一个校验项(输入框,下拉框的等)
最终实现效果如下图所示:
实现
el-form 使用,详情可参见: Form 表单
有几个比较重要的属性:
在提交按钮的时候,执行validate方法即可;实时校验可在rules中设置校验项 trigger: 'change'即可
1.el-form 设计
划分表单到每一个校验项(输入框,下拉框的等),可以设计成 3 级表单
奖励设置 这一个校验项稍微复杂一点,可以动态绑定 model 和 rules 实现子项的表单校验
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图