Element UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架。在前端form表单的开发中会利用Element UI中的el-tree组件作为作为form表单中树状结构的复选框使用，但有时出于实际数据验证的需要，要对el-tree组件的树状结果是否选择进行验证。如果完全通过自己写逻辑代码无疑会比较复杂，如果想通过form表单自带的验证方法，官网又没有提供详细方法。为此本文通过一个简单实例，讲解在Element UI中如何利用form表单中自带的数据验证功能对el-tree是否点击进行验证。
取 消确 定
从上面的代码可以看出对el-tree进行验证，大概有几个步骤：
首先，对el-form进行设置，包括三个内容，利用":model"来对form表单的数据进行绑定，该绑定的数据源名称应与data中的数据进行对应；利用":rules"来设置验证规则，该规则应保存在data数据中；"ref"来对该form表单进行命名，以方便后面可以利用this.$ref来调用该表单中的方法。
其次，对el-form-item进行设置，包括两个内容，利用"prop"设置需要验证的字段名称，该prop中设置的名称必须要与el-form-item的子标签中的取值数据名称需要一致，在上面的例子中，“roleName”与其子节点中的"form.roleName"对应，“auth”与其子节点中的“form.auth”对应。如果prop中设置的名称又与验证规则的名称一致的话，可以不用设置":rules"，如果不一致，需要再设置“:rules”属性。form表单中的自动验证方法处理流程为，通过prop中设置的名称获取子节点中的数据，然后通过设置的rules来获取验证规则，最后进行验证。
最后，对el-tree进行设置，利用v-model来绑定需要验证的内容，利用ref设置el-tree的名称，方便后面通过this.$ref获取该tree中的方法，利用“:data”设置树状结构的显示的内容，利用“@check-change”来绑定用户点击树状结构上的点后的方法，然后在methods中定义具体实现方法，在本例中用“this.form.auth = this.$refs.addRoleTree.getCheckedNodes()”来让表单中的form.auth并利用this.$refs来调用el-tree中的getCheckedNodes来获取具体的点击数据，进而使form表单能够验证该对form.auth进行数据验证。
效果如下所示：
效果图
