el-tree 树形控件

<el-tree 
    :indent="5"  // 相邻级节点间的水平缩进，单位为像素
    :props="defaultProps" 
    ref="tree" 
    :data="leftList"
    :default-expanded-keys="defaultExpandedArr"  // 设置默认展开指定节点 存储默认选中节点对应的key值
    node-key="id" // 指定以哪个属性为唯一识别的 key
    highlight-current // 高亮选中节点
    :expand-on-click-node="false" 
    @node-click="handleNodeClick"  // 点击节点事件
    @node-expand="handleNodeExpand" // 树节点展开
    @node-collapse="handleNodeCollapse"> // 树节点关闭
         <span 
             class="custom-tree-node treeclass" 
             @click="NodeClick(node.level)" 
             slot-scope="{ node, data }">
                   
         </span>
</el-tree>

data(){
    return {
        // 树形结构的组成
        defaultProps: {
            children: "children",
            label: "name",
        },
        defaultExpandedArr: [],
    }
}

 树节点展开

// 树节点展开
handleNodeExpand(data) {
     // 保存当前展开的节点
     let flag = false
     this.defaultExpandedArr.some(item => {
         if (item === data.id) { // 判断当前节点是否存在， 存在不做处理
            flag = true
            return true
         }
    })
    if (!flag) { // 不存在则存到数组里
        this.defaultExpandedArr.push(data.id)
    }
},

 树节点关闭

// 树节点关闭
handleNodeCollapse(data) {
    // 删除当前关闭的节点
    this.defaultExpandedArr.some(item, i => {
         if (item === data.id) {
            this.defaultExpandedArr.splice(i, 1)
         }
    })

    // 这里主要针对多级树状结构，当关闭父节点时，递归删除父节点下的所有子节点
    this.removeChildrenIds(data)
},
// 删除树子节点
removeChildrenIds(data) {
   const ts = this
   data.children.forEach(function (item) {
       const index = ts.defaultExpandedArr.indexOf(item.id)
       if (index > 0) {
           ts.defaultExpandedArr.splice(index, 1)
       }
       ts.removeChildrenIds(item)
   })
},

使树型结构相对应的节点展开

this.$refs["tree"].setCurrentKey(item.id);
this.defaultExpandedArr.push(item.id);