记 vue-element-admin表单form中使用el-input组件与el-tree组件检验

首先html结构

  <el-form
          ref="roleForm"
          :model="roleForm"
          label-width="auto"
          class="demo-roleForm"
          :rules="rules"
  >
      <el-form-item
            label="角色名称"
            prop="name"
          >
            <el-input v-model="roleForm.name" />
          </el-form-item>
          <el-form-item
            label="描述"
            prop="desc"
          >
            <el-input
              type="textarea"
              rows="3"
              v-model="roleForm.desc"
            />
          </el-form-item>
          <el-form-item
            label="菜单权限"
            prop="roleMenus"
          >
            <el-tree
              ref="tree"
              v-model="roleForm.roleMenus"
              :data="menuList"
              show-checkbox
              node-key="id"
              @check-change="check_change"
              :props="defaultProps"
              :default-checked-keys="checkedKeys"
            />
          </el-form-item>
  </el-form>

介绍一下字段的作用

form标签中：

 :model="roleForm"   用来绑定表单中整体的数据，下方所有展     示内容的集合

 :rules="rules"  用来配置表单校验的规则

el-form-item标签中：

  label="标题名称"   用来设置该区域内表单的标题文字
  prop="name"  用来设置表单校验，注意：：：name与data中rules设置的键名一致，并且该名为该表单双向数据绑定的值

el-input标签中：

 v-model="roleForm.name"  用来绑定当前输入框中的值，对应在整体表单数据中，如果要校验的话，需要在rules中设置的名称与当前绑定字段名一致

el-tree标签中：

 ref="tree"     设置名称，方便后面使用tree方法
 v-model="roleForm.roleMenus"   绑定tree结构选中的值，该值要与对应的form-item中的prop的值一样
 :data="menuList"    用来绑定tree中渲染的值
 show-checkbox       用来确定节点是否可以选择
 node-key="id"    用来表示节点的属性，应该是唯一的
 @check-change="check_change"   节点选中状态发生变化时的回调
 :props="defaultProps"    用来设置子节点如何展示
 :default-checked-keys="checkedKeys"    默认勾选的数组

js代码：

data() {
    var validatePass = (rule, value, callback) => {
      console.log(rule, value);
      if (value.length == 0 || !value) {
        callback(new Error("请选择菜单权限"));
      } else {
        callback();
      }
    };
return {
    //表单所有内容集合
    roleForm: {   
        name: "",
        roleMenus: [],

      },
    menuList: "",
    rules: {
        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
        roleMenus: [{ validator: validatePass, trigger: "blur" }]
       },
    };
},

js字段介绍

 首先return中的字段介绍：
 
         roleForm  该字段是上方form表单中绑定的所有内容
         menuList: [ ],  是tree选择push进去的内容
         rules    该字段是定义检验内容的
         rules.name  是绑定的检验名称，该名称与html中form-item中prop的内容一致
        name中配置的是规则：
              1.required  为true，是一般用来校验输入框的内容的，正常情况下直接写[{ required: true, message: "请输入角色名称", trigger: "blur" }]可以直接判断非空
              2.message是条件不满足是弹出的内容
               
              3.当是特殊对象例如tree中的数组的时候，就需要自定义判断了，
               
              4.自定义判断使用validator: functionName字段，functionName这个是设置的方法名称

其次return上方的方法：

   该方法就是通过rules中对应验证下使用validator设置的定义方法
   其中有三个返回值：  
                     1.value 是在点击提交之后提取的内容，可以根据这个字段进行判断空还是其他