el-tree在el-form中通过rules进行校验

el-tree在el-form中通过rules进行校验

• • 背景
  • 正确配置el-tree的rules校验

背景

如下图，在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的校验。如下代码所示：

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-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>