背景
如下图，在el-form中想实现el-tree的校验，elementUI并没有提供相关的示例。
如果是按照通常的方法配置rules,无论是否选择el-tree的选项，都会报错，提示请选择功能权限配置，这说明如果按照这种方法来配置el-tree的rules，是错误的
addRoleFormRules: { permissionIdList: [ { type: 'array', required: true, message: '请选择功能权限配置', trigger: 'change' }, ], },
正确配置el-tree的rules校验
通过自定义validator实现el-tree的校验。如下代码所示：
- el-form绑定校验rules: addRoleFormRules
- 给el-tree绑定ref为addTree
- 自定义addRoleFormRules中关于el-tree的校验
- 通过this.$refs.addTree.getCheckedKeys()获取el-tree选择的项
- 调用this.$refs[‘addRoleForm’].validate()实现表单的校验
<template> <el-card shadow="never"> <el-dialog title="新增角色" :visible.sync="isShowAddRolePopup" width="35%" :before-close="hideAddRolePopup"> <div class="add-role"> <el-form ref="addRoleForm" :rules="addRoleFormRules" :model="addRoleForm" label-width="120px" class="popup-form"> <el-form-item label="角色名称" prop="name"> <el-input v-model="addRoleForm.name" placeholder="请输入角色名称"></el-input> </el-form-item> <el-form-item label="备注" prop="note"> <el-input type="textarea" :rows="2" resize="none" maxlength="50" show-word-limit v-model="addRoleForm.note" placeholder="请输入备注"></el-input> </el-form-item> <el-form-item label="功能权限设置" prop="permissionIdList"> <el-tree :data="permissionOptions" show-checkbox node-key="permissionId" :props="permissionTreeDefaultProps" ref="addTree" @check-change="addPermissionIdListChange" > </el-tree> </el-form-item> <el-form-item> <div class="popup-form-btn"> <el-button @click="hideAddRolePopup">取消</el-button> <el-button type="primary" @click="submitAddRole">确认</el-button> </div> </el-form-item> </el-form> </div> </el-dialog> </el-card> </template> <script> export default { name: 'RoleManagement', data() { var validatePass = (rule, value, callback) => { let arr = this.$refs.addTree.getCheckedKeys() if (arr.length == 0 || !arr) { callback(new Error("请选择功能权限设置")); } else { callback(); } }; return { isShowAddRolePopup: false, permissionOptions: [], addRoleForm: {}, addRoleFormRules: { name: [ { required: true, message: '请输入角色名称', trigger: 'blur' }, ], note: [ { required: false, message: '请输入备注', trigger: 'blur' }, { min: 0, max: 50, message: '长度在 0 到 50 个字符', trigger: 'blur' } ], permissionIdList: [{ required: true, validator: validatePass, trigger: "change" }] }, permissionTreeDefaultProps: { children: 'childPermissionList', label: 'permissionName' }, } }, mounted() { this.getPermissionOptions(); }, methods: { // 获取功能权限设置 getPermissionOptions() { this.$http.get('/getRolePermissionList', {}).then(res => { if (res.data.code === 0) { this.permissionOptions = res.data.data; } else { this.$message.error(res.data.msg); } }).catch(e => { this.$message.error(e.message); }); }, // 展示新增账号弹窗 showAddRolePopup() { this.isShowAddRolePopup = true; }, // 隐藏新增账号弹窗 hideAddRolePopup() { this.isShowAddRolePopup = false; }, // 提交添加账号 submitAddRole() { console.log(this.$refs.addTree.getCheckedKeys()) this.$refs['addRoleForm'].validate((valid) => { if (valid) { this.fetchAddRole(); } else { console.log('error submit!!'); return false; } }); }, // 提交添加账号到后台 fetchAddRole() { this.$http.post('/addEnterpriseRole', this.addRoleForm).then(res => { if (res.data.code === 0) { this.$message.success('添加角色成功'); this.addRoleForm = {}; this.hideAddRolePopup(); this.$refs.table.reload(); } else { this.$message.error(res.data.msg); } }).catch(e => { this.$message.error(e.message); }); }, // 新增角色权限变化 addPermissionIdListChange() { this.addRoleForm.permissionIdList = this.$refs.addTree.getCheckedKeys(); }, } } </script> <style lang="scss" scoped> .add-role { width: 100%; } .popup-form { width: 80% !important; } .popup-form-btn { display: flex; justify-content: flex-end; } </style>
