博客信息

SPA项目开发之CRUD+表单验证

发布时间:『 2019-07-21 10:37』  博客类别:前端框架  阅读(768)

功能:

1、dialog布局

2、表单验证

3、新增功能

4、修改功能

5、删除功能


小李飞刀_Vue


小李飞刀_Vue



1. 表单验证

   Form组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,

   并将Form-Itemprop属性设置为需校验的字段名即可

   

   <el-form-item label="活动名称" prop="name">

   <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

 

   1:有多个表单,怎么在提交进行区分?

        我们在rules这里写了对表单的验证规则,但是我们如何在methods里进行指定的表单进行认证,

        所以我们一开始就在el-form里写了 ref="ruleForm",我们在methods里就可以用

 

 

   2:清空表单验证信息

        this.$refs[formName].resetFields();

 

2. CUD

  2.1 新增

  

  2.2 添加修改/删除按钮

 

  2.3 <template>上使用特殊的slot-scope 特性,可以接收传递给插槽的prop


涉及到的相关代码

src.zip


over......


关键字:     前端框架       Vue       SPA  

备案号:湘ICP备19000029号

Copyright © 2018-2019 javaxl晓码阁 版权所有