java Element 获取值的节点 element获取节点属性

问题描述：官方提供了获取半选节点的API,但是回显会有一些没有选中的节点都勾选上了，那怎么办呢？

重新回到设置 check-strictly 为 true 时，父子级不互相关联，挨个点击用户体验不好的问题，同时也避免了出现半选的情况。

我们简化用户的操作：

1、当点击勾选复选框时候，若状态为 选中 
1.1、其所有 父节点 （父节点、父节点的父节点以此类推）全部统一跟随当前节点变化为 选中 。
1.2、其下 子节点 全部统一跟随父节点变化为 选中 。

2、当点击勾选复选框时候，若状态为 未选中 ，其下 子节点 全部统一跟随父节点变化为 未选中 。

一、el-tree 标签属性

node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。标识节点唯一的键值名称。
default-checked-keys：对应el-tree多选树组件初始化时默认选中ID
check-strictly：是否严格的遵循父子不互相关联的做法,默认为false
check：当复选框被点击的时候触发的方法

<el-tree
  :data="menuTreeData"
  :default-checked-keys="editData.menuId"
  ref="trees"
  show-checkbox
  highlight-current
  accordion
  check-strictly
  node-key="id"
  :props="defaultProps"
  :default-expand-all="true"
  @check="clickDeal"
></el-tree>

二、点击复选框处理

点击事件时，若选中节点，则父节点和子节点都设为勾选状态，若取消节点选中，则取消该节点下的所有节点。

clickDeal (currentObj, treeStatus) {
  // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
  let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
  // 选中
  if (selected !== -1) {
    // 子节点只要被选中父节点就被选中
    this.selectedParent(currentObj)
    // 统一处理子节点为相同的勾选状态
    this.uniteChildSame(currentObj, true)
  } else {
    // 未选中 处理子节点全部未选中
    if (currentObj.childs.length !== 0) {
      this.uniteChildSame(currentObj, false)
    }
  }
},

三、处理选中父节点和子节点

通过 setChecked 设置节点是否选中状态。

check 事件可以传递给 data 属性的数组中该节点所对应的对象，将data 中及其下所有字节，统一处理子节点为相同的勾选状态

uniteChildSame (treeList, isSelected) {
  this.$refs.trees.setChecked(treeList.id, isSelected)
  if (treeList.children) {
    for (let i = 0; i < treeList.children.length; i++) {
      this.uniteChildSame(treeList.children[i], isSelected)
    }
  }
  
},

怎么获取选中节点的父节点呢？

首先我们先介绍 getNode，根据 data 或者 key 拿到 Tree 组件中的 node，那么我们可以通过点击节点获取到当前节点信息。

 使用 currentNode.parent.key 判断父节点是否选中，如果没选中，则设置父节点选中，同时递归查询父节点的父节点选中情况。

// 统一处理父节点为选中
selectedParent (currentObj) {
  let currentNode = this.$refs.trees.getNode(currentObj)
  if (currentNode.parent.key !== undefined) {
    this.$refs.trees.setChecked(currentNode.parent, true)
    this.selectedParent(currentNode.parent)
  }
},