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】進行渲染的時候【全選】和【半選】就會區分開：

這樣這個問題就解決掉了。