CUD表单验证+增删改查

CUD表单验证+增删改查

主要内容

1.后台数据接口准备
增删改接口

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 在上使用特殊的slot-scope 特性，可以接收传递给插槽的prop

slot-scope:类似将每一行的row对象封装到槽中，之后直接从scope中获取row对象信息和行索引index信息即可

代码部分

		
			
				
					
				
				
					
				
			
			

				取消
				保存
			
		

加rules的验证

rules: {
					title: [{
							required: true,
							message: '请输入文章标题',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: '长度在 3 到 5 个字符',
							trigger: 'blur'
						}
					],
					body: [{
						required: true,
						message: '请输入文章内容',
						trigger: 'blur'
					}]
				}

新增页面