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

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

场景是这样的:勾选了子节点,例如这样:

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

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

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

这样保存成功后,再次进入的效果是这样的:

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

原因是:半选的【系统管理】以及【菜单管理】也被提交进行保存。在使用【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】进行渲染的时候【全选】和【半选】就会区分开:

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

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

上一篇:jquery获取radio的文本或值


下一篇:layui树状组件tree回显如果子节点选中,当前主节点下所有元素都会选中问题修复