【eltree高亮节点】

需求描述

代码实现

1. css部分

<el-tree :data="treedata" :props="defaultProps" 
@node-click="handleNodeClick" 
node-key="category_id" :highlight-current="true" ref="myTree" 
:current-node-key="currentNodeKey" 
:default-expanded-keys="currentNodeKeyarr">
</el-tree>

2. method方法部分

1. data定义数据

treedata: [],
defaultProps: {
    children: 'children',
    label: 'category_name'
},
article_category_id: '',  // 当前文章所属分组id
currentNodeKey: '', // m默认选中节点树 "ca47b82a-3c3-fde-a7bc-27cef5a9ec101"
currentNodeKeyarr: [],  // 测试用例"ca47b82a-3c3-fde-a7bc-27cef5a9ec75e","ca47b82a-3c3-fde-a7bc-27cef5a9ec100"

2. 递归算法匹配id路径

	```
// 递归算法匹配id路径
findPathById(treeDataArray, targetId, currentPath = []){
    // console.log('this.currentNo12deKeyarr12311', treeData.children)
    for (const treeData of treeDataArray) {
        if (treeData.category_id === targetId) {
            return [...currentPath, treeData.category_id];
        }

        if (treeData.children && treeData.children.length > 0) {
            const path = this.findPathById(treeData.children, targetId, [...currentPath, treeData.category_id]);
            if (path) {
                return path;
            }
        }
    }
    return null;
},
	```

3. 获取id路径数组进行赋值

//核心赋值代码
const result = this.findPathById(resdata, targetId)
this.currentNodeKeyarr = result

4. mounted方法

 //树状图高亮
 setTimeout(() => {
     this.$nextTick(function () {
         this.$nextTick(() => {
             this.$refs.myTree.setCurrentKey(this.currentNodeKey);
         });
     });
 },1000)

总结

1. 有什么不明白的地方建议直接看官网，思路很重要，盲目找博客不一定符合自己的需求