树形控件的基本使用可以访问element-ui官方文档进行查看和练习。

现在测试人员提了一个需求，就是要在收缩父级部门的时候,把子部门的展开节点也要进行收缩。element-ui默认是不会把树的子节点一起进行关闭的，要完成这个功能，要在node-expand 和 node-collapse这两个回调函数触发的时候做一些操作，回调函数有三个参数, data 当前点击树形结点的原始数据, node 当前树形结点的对象, com 表示当前节点的vue实例，实现这个功能，主要是使用com 或者 node 参数和 expand这个属性代码如下

 // 给el-tree添加的方法
 @node-expand="openNodeFunc"
 @node-collapse="openNodeFunc"
 
openNodeFunc(data, node, com) {
      // console.log(this.treeExpandData)
      // com.expanded = false

//= ================= bugid 33646 start ===============
    console.log(node)
    console.log(com)
    this.setTreeChildNodeExpanded(com)
    if (com.expanded === false) {
    com.expanded = true
    }
//= ================= bugid 33646 end ===============



// 设置树形节点的expanded属性
setTreeChildNodeExpanded(com) {
  // 不要遍历第一个元素 因为第一个元素就是他自己本身
  let len = com.$children.length
  if (len > 1) {
    for (let i = 1; i < len; i++) {
      if (com.$children[i].expanded) {
        com.$children[i].expanded = false
      }
      // 递归自己的子节点
      this.setTreeChildNodeExpanded(com.$children[i])
    }
  }
}
复制代码