Element UI中form表单对el-tree的自动验证

Element UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架。在前端form表单的开发中会利用Element UI中的el-tree组件作为作为form表单中树状结构的复选框使用，但有时出于实际数据验证的需要，要对el-tree组件的树状结果是否选择进行验证。如果完全通过自己写逻辑代码无疑会比较复杂，如果想通过form表单自带的验证方法，官网又没有提供详细方法。为此本文通过一个简单实例，讲解在Element UI中如何利用form表单中自带的数据验证功能对el-tree是否点击进行验证。

<template>
  <!-- 对表单进行数据绑定，设置验证规则和表单属性 -->
    <el-form :model="form" :rules="rules" ref="addRoleForm">
      <!-- 普通验证方法 -->
        <el-form-item label="角色名称"  prop="roleName">
            <el-input v-model="form.roleName"></el-input>
        </el-form-item>
				<!-- 对树状结果进行验证 -->
        <el-form-item label="角色权限"  prop="auth">
          <!-- 对树状组件进行数据设置 -->
            <el-tree v-model="form.auth" ref="addRoleTree" :data="roleAuthData"
                     @check-change="handleCheckChange" node-key="authTag"
                     show-checkbox></el-tree>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
    </div>
</template>
<script>
    export default {
        name: "test",
        data: {
          // 设置表单中的默认数据
            form: {
                roleName: "",
                auth: "",
            },
             // 设置树状结果显示的数据 
            roleAuthData: [
                {
                    id: 1,
                    label: '账号管理',
                    authTag: 'account',
                    children: [
                        {
                            id: 11,
                            label: '账号创建',
                            authTag: 'account/creat',
                        }, {
                            id: 12,
                            label: '账号注销',
                            authTag: 'account/logout',
                        }
                    ],
                }, {
                    id: 2,
                    label: '角色管理',
                    authTag: 'role',
                    children: [
                        {
                            id: 21,
                            label: '角色创建',
                            authTag: 'role/createRole',
                        }, {
                            id: 22,
                            label: '角色名称创建',
                            authTag: 'role/createRoleName',
                        }
                    ]
                }
            ],
            // 设置验证规则
           rules: {
                    roleName: [
                        {required: true, message: '请输入角色的名称', trigger: 'blur'}
                    ],
                    auth: [
                        {required: true, message: "请选择内容", trigger: "change"}
                    ]

                },
        },
        methods: {
          // 设置el-tree选择事件
            handleCheckChange(data) {
                this.form.auth = this.$refs.addRoleTree.getCheckedNodes()
            },
        }
    }
</script>
<style scoped></style> 

从上面的代码可以看出对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进行数据验证。

效果如下所示：

效果图