CUD表单验证+增删改查

CUD表单验证+增删改查

主要内容

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

2.Dialog弹出框

2.1 基本结构

 <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="dialogClose">
    <!-- form表单 -->
    <el-form :label-position="labelPosition" :model="bookForm" :rules="rules" ref="bookForm">
    ...
    </el-form>
  </el-dialog>

注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 表单验证

  <el-form :model="bookForm" :rules="rules" ref="bookForm">
     ...
  </el-form>

注1：:rules="rules"表单验证定义，只需要通过 rules 属性传入约定的验证规则

   //将el-form-item的prop属性设置为需校验的字段名即可,如下：
   <el-form-item label="书本名称" prop="bookname" :label-width="formLabelWidth">
      <el-input v-model="bookForm.bookname" autocomplete="off"></el-input>
   </el-form-item>

   //在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是指<el-form ref="bookForm">中定义的ref属性名