el-tree 树形控件

<el-tree 
    :indent="5"  // 相邻级节点间的水平缩进，单位为像素
    :props="defaultProps" 
    ref="tree" 
    :key="treeKey"  // 更新树形的数据之后，视图没有发生改变 可以使用key更新视图
    :data="leftList"
    :default-expanded-keys="defaultExpandedArr"  // 设置默认展开指定节点 存储默认选中节点对应的key值
    :current-node-key="rightCurrentNode.id"   // 默认选中节点
    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>


this.treeKey = new Date().getTime();

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);

this.$nextTick(() => {
     this.$refs.tree.setCurrentKey(this.categoryNameId) 
})

Element UI 树形控件Tree 【详解】el-tree 展开指定节点，判断是否存在指定节点_el-tree展开指定节点-CSDN博客

<el-tree
    :indent="5"
    node-key="id"
    :props="{label: 'name'}"
    ref="elTree"
    :key="treeKey"
    :data="filteredDataList"
    :default-checked-keys="[rightCurrentNode.id || '']"
    :default-expanded-keys="[rightCurrentNode.id || '']"
    :current-node-key="rightCurrentNode.id"
    highlight-current
    :expand-on-click-node="false"
    @node-click="handleNodeClick">
        <div class="custom-tree-node ellipsis" slot-scope="{ node,data }"> 
        </div>
</el-tree>



watch: {
  'rightCurrentNode.id': {
     handler(newval, oldval) {
       this.$nextTick(function () {
         this.treeKey = new Date().getTime();  // 更新视图
         this.$refs.elTree.setCurrentKey(this.rightCurrentNode.id) // 设置选中的高亮数据
       })
     },
     immediate:true,
     deep:true
   },
},