正确配置element中el-tree的表单校验

如图:

 

通过自定义validator实现el-tree的校验。如下步骤：

1. el-form绑定校验rules: addRoleFormRules

2. 给el-tree绑定ref为addTree

3. 自定义addRoleFormRules中关于el-tree的校验

4. 通过this.$refs.addTree.getCheckedKeys()获取el-tree选择的项

5. 调用this.$refs[‘addRoleForm’].validate()实现表单的校验

上示例代码:

<template>
	<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="treeList">
			<el-tree
				:data="permissionOptions"
				show-checkbox
				node-key="id"
				ref="addTree"
				@check-change="addPermissionIdListChange"
			>
			</el-tree>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="submitAddRole('addRoleForm')">确认</el-button>
		</el-form-item>
	</el-form>
</template>

<script>

export default {
	data() {
		var validatePass = (rule, value, callback) => {
			let arr = this.$refs.addTree.getCheckedKeys(); // 在此获取选中的树形数据
			if (arr.length == 0 || !arr) {
				callback(new Error("请选择功能权限设置"));
			} else {
				callback();
			}
		};
		return {
            addRoleForm: {
                name: '',
                treeList: []
            },
			addRoleFormRules: {
				name: [
					{ required: true, message: '请输角色名称', trigger: 'blur' },
					{ min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
				],
				treeList: [{ required: true, validator: validatePass, trigger: "change" }]
			}
		}
	},
	methods: {
		// 提交添加
		submitAddRole(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log('通过');
				} else {
					return false;
				}
			});
		}
	}
}
</script>

总体思路就是: 自定义校验规则中获取选中的树节点数据,数据为空数组校验规则不通过 

有更好的解决办法望不吝赐教,谢谢!