el-tree有一个子节点整个节点都会被选中

31 阅读1分钟

<el-tree :data="roleMenuData.menuList" show-checkbox node-key="id" :check-strictly="isCheck" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" :props="defaultProps" ref="menuTree" >

 this.isCheck = true; //重点:回显之前一定要设置为true
  this.$nextTick(() => {
    this.setCheckedKeys();
    this.isCheck = false; //重点: 赋值完成后 设置为false
  });


// 递归设置父节点的选中状态
setParentChecked(node) {
  if (node.parent) {
    this.$refs.menuTree.setChecked(node.parent.data, true);
    setParentChecked(node.parent);
  }
},
setCheckedKeys() {
  // 设置树节点的选中状态
  this.$refs.menuTree.setCheckedKeys(this.defaultCheckedKeys);

  // 递归设置父节点的选中状态
  const setParentChecked = (node) => {
    if (node.parent) {
      this.$refs.menuTree.setChecked(node.parent.data, true);
      setParentChecked(node.parent);
    }
  };

  // 遍历选中的节点,设置其所有父节点的选中状态
  this.defaultCheckedKeys.forEach((key) => {
    const node = this.$refs.menuTree.getNode(key);
    if (node && node.parent) {
      setParentChecked(node);
    }
  });
},