CUD+表单验证

1.后台数据接口准备

   增删改接口

dao:

basedao 

action: 

2.Dialog弹出框

新增按钮按钮

 

  2.1 基本结构

 
   
   
    ...
   
 

  注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
       :visible.sync="dialogFormVisible"
    
  注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
       @close="dialogClose"

3.表单 

  3.1 基本结构

 
     
    
     
     
       
     
     ... 
 

  注1：:label-position设置表单对齐方式
  注2：设置表单元素属性双向绑定的对象属性名称
  
       data: function() {
       return {
               bookForm: {
           id: null,
           bookname: null,
           price: '',
           booktype: null
           }
           };
       }

  3.2 表单验证

 
     ...
 

  注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则
       
       //将el-form-item的prop属性设置为需校验的字段名即可,如下：
       
         
       

       //在Vue实例的data属性中定义表单验证规则，如下：
       rules: {
       bookname: [
          {required: true,message: '请输入书本名称！',trigger: 'blur'},
          {min: 3,max: 6,message: '长度必须在3-6个字符之间',trigger: 'blur'}
       ],
           ...
       }

  注2：有多个表单，怎么在提交进行区分？

       我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证，
       所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用

  注3：清空表单验证信息
  
       this.$refs[formName].resetFields();

       补充说明：formName是指中定义的ref属性名

  注4：表单重置时必须先清空表单验证信息，再清空表单数据信息
  
       //通过form表单的ref属性来清空表单验证信息
       this.$refs['bookForm'].resetFields();
       //清空上一次表单的数据信息
       this.bookForm.id = null;
       this.bookForm.bookname = null;
       this.bookForm.price = null;
       this.bookForm.booktype = null;

 

​






​

3. CUD

  2.1 新增

  在事件中设置dialogFormVisible="true"即可打开dialog弹出框
  
  2.2 添加修改/删除按钮

  2.3 在