ElementUI tree控件怎么通过子节点去找到父节点?

Question

我是用了ElementUI的tree控件，并且设置check-strictly为true,勾选子节点与勾选父节点现在是没有关系的，现在我勾选了其中的一个子节点，我该如何通过这个子节点找到它对应的父节点或者根节点？

Answer 1

官方v2.2.1版本已经提供获取半选中状态节点对象。

具体实现思路：

// 1. 先合并选中／半选中节点Id，请求传给后台。
[].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())

this.tempKey === -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化

// 2. 给tree绑定数据时，通过tempKey移除之前添加的半选中状态节点Id。
var idx = this.menuIdList.indexOf(this.tempKey)
if (idx !== -1) {
  this.menuIdList.splice(idx, this.menuIdList.length - idx)
}
this.$refs.menuListTree.setCheckedKeys(this.menuIdList)

详细实现代码，可在https://github.com/daxiongYan...查阅。

Answer 2

elementUi 有个方法是 getNode()
打印 this.$refs.tree.getNode(id);
可以看到整个节点的数据

所以this.$refs.tree.getNode(id).parent.data就是我们要找的父节点了

Answer 3

自己实现个。

获取到子节点的id，然后遍历data，寻找父节点

// 广度优先遍历
// data 就是ElementUI的Tree组件里那个data
let node = [data]
let ok = false
let result // 包含你说的那个子节点的父节点
while (!ok) {
    let item = node.shift()
    if (item.id == id) {
        result = item
        ok = true
    } else if (item.children && item.children.length > 0) {
        node = node.concat(item.children)
    }
}

Answer 4

如果后台返回给你的是没转换成树的JSON数组的话，我是这样写的

/**
 * @param {Array} data JSON数组
 * @param {Array} ids element-ui tree组件getCheckedKeys返回的选中的id数组
 * @return {Array} result 所有选中节点的id和他们的父节点及祖父节点id集合
*/
function getIds (data, ids, result) {
  const length = data.length
  const pids = []
  result = result || []
  getIds.ids = getIds.ids || ids
  if (ids.length === 0) {
    const concats = result.concat(getIds.ids)
    getIds.ids = null
    return concats
  }
  for (let i = 0; i < length; i++) {
    let pid = data[i].pid
    if (pid && ids.indexOf(data[i].id) > -1 && result.indexOf(pid) === -1) {
      result.push(pid)
      pids.push(pid)
    }
  }
  return getIds(data, pids, result)
}

Answer 5

我做这种的话，都是通过数据查找的
点击子节点的时候有个事件，他有该节点的数据，你赋值到另外一个变量就行，然后你自己处理就行！