element-ui default-checked-keys 父节点勾选会把下面的所有子节点选中【解决办法】

最近在用 Elementui 框架做项目，在做权限管理的时候发现了一个问题：

场景是这样的：勾选了子节点，例如这样：

在保存的时候，我们通常把【全选】和【半选】的ID全部保存起来，代码示例：

let checkedKeys = that.$refs.tree.getCheckedKeys();
let parentKeys = that.$refs.tree.getHalfCheckedKeys();
roles = checkedKeys.concat(parentKeys).toString(','); // 保存的roles

这样保存成功后，再次进入的效果是这样的：

原因是：半选的【系统管理】以及【菜单管理】也被提交进行保存。在使用【default-checked-keys】时，父节点是选中状态，子节点会自动被勾选。

解决这个问题的方法参考：

具体代码示例：

<el-tree
  class="filter-tree"
  :data="permissionData"
  :props="props"
  node-key="id"
  ref="treeForm"
  show-checkbox
  :default-checked-keys="this.savedPermissionIds"
  :default-expanded-keys="this.savedPermissionIds"
  @check="getCheckedNodes">
</el-tree>

JS示例：

showDialog(id) {
  this.isShowPermissionTree = true;
  this.roleId = id;
  this.savedPermissionIds = [];
  this.getPermissionTree();
},
//获取用户勾选的权限id用于传参后台
getCheckedNodes() {
  // let selectedPermission = this.$refs.treeForm.getCheckedNodes(false, true); //(leafOnly, includeHalfChecked) 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
  // this.permissionIds = selectedPermission.map(item => {
  //   return item.id;
  // });
  let parentArr = this.$refs.treeForm.getHalfCheckedKeys();
  let childeArr = this.$refs.treeForm.getCheckedKeys();
  let arr = childeArr.concat(parentArr);
  this.permissionIds = arr;
},
//取消
cancel() {
  this.isShowPermissionTree = false;
  this.savedPermissionIds = [];
  this.getPermissionTree();
},
//获取树形权限列表
getPermissionTree() {
  menulistByPid({ flag: 1 }).then(res => {
    this.permissionData = res.body;
    //获取权限管理配置id并显示
    getPermissionIds({ roleId: this.roleId }).then(res => {
      this.savedPermissionIds = res.body;
      let newArr = [];
      let item = "";
      if (this.savedPermissionIds && this.savedPermissionIds.length !== 0) {
        this.savedPermissionIds.forEach(item => {
          this.checked(item, this.permissionData, newArr);
        });
        this.savedPermissionIds = newArr;
        // console.log("this.savedPermissionIds111", this.savedPermissionIds);
      }
    });
  });
},
checked(id, data, newArr) {
  data.forEach(item => {
    if (item.id == id) {
      if (item.items && item.items.length == 0) {
        newArr.push(item.id);
      }
    } else {
      if (item.items != null && item.items.length != 0) {
        this.checked(id, item.items, newArr);
      }
    }
  });
  // console.log("newArr", newArr);
},

这样再通过【default-checked-keys】进行渲染的时候【全选】和【半选】就会区分开：

这样这个问题就解决掉了。